react-CSDN博客

React由Facebook（现在叫 meta）的软件工程师Jordan Walke创建。2013年的时候在社区开源。那么react是什么呢？React是一个把数据渲染为HTML视图的开源JavaScript 库 [ 视图层框架 ] 。React为程序员提供了一种子组件不能直接影响外层组件的模型 [ 单向数据流 ]，数据改变时会对HTML文档进行有效的更新。

二、React的特点：

1、组件化

2、虚拟DOM

3、单向数据流

数据自上而下
- Props 不可变
- States可变
- 任何数据、函数都可以作为属性(props)传递给子组件(Props,　States,　Handlers,　Styles)

三、React的优点

1、可组合性：定义了一个组件后，可以和其他组件进行并列或者嵌套使用，多个小组件还可以构建一个复杂组件，一个复杂的组件也可以分解成多个功能简单的小组件。

2、可重用性：定义后的组件功能是相对独立的，在不同的UI场景中，可以重复使用。

3、可维护性：每个组件的实现逻辑都仅限于自身，不涉及其他组件，这样的可维护性较高。

四、组件的生命周期

创建阶段
更新阶段
卸载阶段

1、初始化阶段
① constructor 执行

在 mount 阶段，实例化 React 组件，组件中 constructor 就是在这里执行的。在实例化组件之后，会调用 mountClassInstance 组件初始化。

② componentWillMount 执行

组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

在渲染前调用,在客户端也在服务端。

③ render 函数执行

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

④ componentDidMount执行

组件渲染之后调用，只调用一次。

在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。

创建阶段对应的生命周期的执行顺序：constructor -> componentWillMount -> render -> componentDidMount

2、更新阶段
①执行生命周期 shouldComponentUpdate(nextProps, nextState)

react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，

如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比

②执行生命周期 componentWillUpdate

组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

③执行 render 函数

组件渲染

⑦执行 componentDidUpdate

此时 DOM 已经修改完成。可以操作修改之后的 DOM 。

更新阶段对应的生命周期的执行顺序： shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

4、销毁阶段

①执行生命周期 componentWillUnmount

组件将要卸载/销毁时调用，一些事件监听和定时器需要在此时清除。

五、类组件和函数组件

1、使用class定义一个组件：

constructor是可选的，我们通常在constructor中初始化一些数据

this.state中维护的就是我们组件内部的数据

render() 方法是 class 组件中唯一必须实现的方法
2、函数组件
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数
- this关键字不能指向组件实例（因为没有组件实例）
- 没有内部状态（state）
- useState:让函数组件也可以有state状态, 并进行状态数据的读写操作
- useEffect :可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
- componentDidMount: 在组件挂载后立即执行的生命周期方法。可以使用空的依赖数组模拟此行为。
```
useEffect(() => {
  // componentDidMount 逻辑
}, []);
```
- componentDidUpdate: 在组件更新后执行的生命周期方法。可以将需要监听的变量添加到依赖数组中，并在useEffect回调函数中处理更新逻辑。
- ```
useEffect(() => {
  // componentDidUpdate 逻辑
}, [variable1, variable2]);
```
- componentWillUnmount: 在组件卸载之前执行的生命周期方法。可以在返回函数中定义清理逻辑。
- ```
useEffect(() => {
  // componentDidMount 逻辑

  return () => {
    // componentWillUnmount 逻辑
  };
}, []);
```
- 3、函数组件和类组件的区别：
- 函数组件没有生命周期和状态state，而类组件有。
- 函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。