react基础Day04-React原理揭秘&React路由基础

React原理揭秘

目标

• 能够说出React组件的更新机制
• 能够对组件进行性能优化
• 能够说出虚拟DOM和DIff算法

组件更新机制

• setState() 的两个作用

  • 修改state
  • 更新组件

• 过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）

组件性能优化

减轻state

• 减轻state：只存储跟组件渲染相关的数据（比如：count/ 列表数据 /loading等）
• 注意：不用做渲染的数据不要放在state中
• 对于这种需要在多个方法中用到的数据，应该放到this中

避免不必要的重新渲染

• 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
• 问题：子组件没有任何变化时也会重新渲染
• 如果避免不必要的重新渲染？
• 解决方式：使用钩子函数 shouldComponentUpdate(nextProps, nextState)
  • 在这个函数中，nextProps和nextState是最新的状态以及属性
• 作用：这个函数有返回值，如果返回true，代表需要重新渲染，如果返回false，代表不需要重新渲染
• 触发时机：更新阶段的钩子函数，组件重新渲染前执行(shouldComponentUpdate => render)

随机数案例

需求：随机生成数字，显示在页面，如果生成的数字与当前显示的数字相同，那么就不需要更新UI，反之更新UI。

利用nextState参数来判断当前组件是否需要更新

class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件，每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps,nextState) {
         // 判断一下当前生成的 值是否与页面的值相等
         if(nextState.number !==