React 基础优化

2022 年 02 月 08 日

53 次浏览

1599字数

## Component的问题

1. 只要执行 setState(),即使不改变状态数据, 组件也会重新 render() ==> 效率低
	
	2. 只当前组件重新 render(), 就会自动重新 render 子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

### 原因
> Component 中的 shouldComponentUpdate() 总是返回 true

### 优化

> 只有当组件的 state 或 props 数据发生改变时才重新 render()

### 解决

- 重写 ```shouldComponentUpdate()``` 方法，比较新旧 ```state``` 或 ```props``` 数据, 如果有变化才返回 ```true```, 如果没有返回 ```false```

```js
    shouldComponentUpdate(nextProps,nextState){
      return true || false
    }
    ```

- 使用 ```PureComponent``` 重写了 ```shouldComponentUpdate()```, 只有 ```state``` 或 ```props``` 数据有变化才返回 ```true```
    ```js
	export default class Parent extends PureComponent {}
    ```

> 注意 ：
    > 
    > 只是进行 state 和 props 数据的浅比较, 如果只是数据对象内部数据变了, 返回false
    > 
    > 不要直接修改 state 数据, 而是要产生新数据

- 项目中一般使用 ```PureComponent``` 来优化

## render props
如果你有学过Vue，那么你应该很熟悉这种方式，其实就是类似于插槽
### children props
问题: 如果B组件需要A组件内的数据, ==> 做不到 
```jsx
<A>
  <B>xxxx</B>
</A>
{this.props.children}
```

### render props

```jsx
<A render={(data) => <C data={data}></C>}></A>

// A组件: {this.props.render(内部state数据)}
// C组件: 读取A组件传入的数据显示 {this.props.data} 
```

## 错误边界
- 错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

- 只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

- ```getDerivedStateFromError``` 配合 ```componentDidCatch``` 使用

```js
  // 生命周期函数，一旦后代组件报错，就会触发

static getDerivedStateFromError(error) {
    console.log(error)
    // 在render之前触发
    // 返回新的state
    return {
      hasError: true
    }
  }

componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info)
  }
  ```

最后修改：2022 年 12 月 07 日