青训营上课笔记

七.React

React 是一个用于构建用户界面的 JavaScript 库。

1. React 基础

组件：React 的核心思想是组件化。每个组件代表 UI 的一部分。

JSX：JavaScript XML，用于描述 UI。

const element = <h1>Hello, world!</h1>;

2. 渲染元素

元素是 React 应用的最小单位。

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

3. 组件 & Props

函数组件和类组件。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

4. State & 生命周期

使用 setState 更新组件的状态。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>;
  }
}

5. 事件处理

在 React 中使用驼峰命名法处理事件。

<button onClick={this.handleClick}>Click me</button>

6. 条件渲染

使用 JavaScript 运算符如 if 或条件运算符来创建元素的不同输出。

7. 列表 & Keys

使用 map() 函数渲染列表。

const numbers = [1, 2, 3];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

8. 表单

在 React 中，表单元素如 <input>, <textarea>, 和 <select> 通常有自己的状态。

9. 状态提升

当多个组件需要共享状态时，将其提升到它们的最近共同父组件中。

10. 组合 vs 继承

React 推荐使用组合而不是继承来重用组件之间的代码。

11. Context

Context 提供了一种在组件之间共享值的方法，而不必显式地通过组件树的每一层传递 props。
```
const ThemeContext = React.createContext('light');
```

12. Refs

Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

13. Fragment

可以让你聚合一组子元素，而不需要在 DOM 中添加额外的节点。

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

14. 高阶组件 (HOC)

是一个函数，接受一个组件并返回一个新的组件。

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    /* ... */
  };
}

15. Portals

提供了一种将子节点渲染到 DOM 节点的方法，该节点存在于父组件的 DOM 层次结构之外。
```
ReactDOM.createPortal(child, container)
```

16. 错误边界

是一种 React 组件，它可以捕获并输出发生在其子组件树任何位置的 JavaScript 错误。

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // Handle the error
  }
  render() {
    return this.props.children;
  }
}

17.实例

主题切换：

import React, { useState, useContext } from 'react';

const ThemeContext = React.createContext();

function ThemeToggle() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <Content />
    </ThemeContext.Provider>
  );
}

function Content() {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
}

export default ThemeToggle;

解释：这是一个简单的主题切换应用。使用 useState 来管理主题状态，并使用 useContext Hook 来访问当前的主题。点击按钮时，主题在“light”和“dark”之间切换。

计数器应用：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

解释：这是一个简单的计数器应用。使用 useState Hook 来管理计数状态。每次点击按钮时，计数值增加。

18.相对于三件套的开发

1. 组件化开发：React以组件为基本单位进行开发，通过将UI划分为独立的可复用组件，使得代码更具可维护性和可测试性。每个组件都有自己的状态和生命周期，可以实现自我管理和更新。这种组件化开发的方式可以提高开发效率，并且在多人合作时更容易进行代码复用和组件的拆分。

2. 虚拟DOM：React使用虚拟DOM技术，通过在内存中维护一份虚拟DOM树来提升性能。当组件的状态发生变化时，React会重新构建虚拟DOM树，并通过比较新旧虚拟DOM树的差异，只更新真正需要变化的部分，而不是重新渲染整个页面。这种优化可以减少DOM操作，提高页面渲染效率。

3. 单向数据流：React采用单向数据流的数据管理方式，通过将数据的流向限制在一个方向上，可以使得代码更易于理解和维护。数据的改变只能通过修改状态来实现，不允许直接修改DOM。这种单向数据流的机制有助于保持代码的一致性，并减少了出现数据冲突和bug的可能性。

待办项示例：

HTML+CSS+JavaScript方式实现待办事项列表：

<!DOCTYPE html>
<html>
<head>
    <title>Todo List</title>
    <style>
        /* CSS样式 */
    </style>
</head>
<body>
    <ul id="todo-list">
        <!-- 待办事项列表 -->
    </ul>

    <script>
        // JavaScript代码
    </script>
</body>
</html>

React方式实现待办事项列表：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在React方式中，我们使用了函数组件的形式来定义TodoList组件。通过useState钩子函数，我们定义了todos和inputValue两个状态，并通过setTodos和setInputValue来修改状态的值。当用户点击Add按钮时，会调用addTodo函数来添加新的待办事项，并重新渲染组件。这样，在用户输入数据和点击按钮时，只会更新相应的部分，而不是整个页面。同时，组件的拆分和复用也更加方便。

综上所述，React相对于前端三件套开发的差异与优势在于组件化开发、虚拟DOM和单向数据流。这些特性使得React在大型项目中更易于维护和扩展，并提供了更好的性能和开发效率。

青训营前端 ｜ 青训营