react-原理解析

1. setState()说明

• setState()是异步更新调用

• 注意：使用该语法时，后面的setState()不要依赖于前面的setState()

• 可以多次调用setState(),只会触发一次重新渲染

• 解决在一次setState()上修改值的情况

    this.setState((state,props) => {
        return {
            //state最新的值
            count: state.count + 1
        }
    })

• 第二个参数
• setState(upadater[,callback])

    this.setState((state,props) => {},
    // 状态更新后并且重新渲染后，立即执行：
    () => {
        document.title = '更新state后的标题' + this.state.count
    }
)

2. jsx语法的转化过程

• JSX仅仅是createElement()方法的语法糖(简化语法)
• JSX语法被@babel/preset-react插件编译为createElement()方法,最终变为react元素

3. 组件更新机制

• setState()的两个作用：1.修改state2.更新组件
• 父组件更新渲染，子组件也会更新渲染

4. 组件性能优化

1)减轻state

• 减轻state:只存储跟组件渲染相关的数据
• 注意： 不用做渲染的数据不要放到state中，比如定时器
• 对于这种多个方法中用到的数据，应该放到this中

2. 避免不必要的重新渲染

• 使用钩子函数 shouldComponentUpadate(nextProps,nextState)
• 作用： 使用返回值判断是否重新渲染，返回true表示重新渲染，false表示不渲染
• shouldComponentUpadate在更新前执行，在render之前

    class Hello extends Component {
        shouldComponentUpdate(nextProps,nextState) {
            //根据条件判断是否重新渲染
            if(nextProps.number == nextState.number){
                return flase
            }
            return true
        }
    }

3. 存组件

• 说明： 存组件内部的对比是shallow compare(浅层对比)
• 对于引用类型，只比较对象的引用（地址）是否相同
• 注意： state或props中属性值为引用类型时，应该创建新数据，不要直接修改源数据

5. 虚拟DOM和Diff算法

• react更新思想： 只要state变化就重新渲染视图、

• react做到的部分更新，虚拟dom和diff算法

• 虚拟dom: js对象，用来描述希望在屏幕上看到的内容（ui）

• 执行过程：

• 1. 初次渲染时，react会根据初始state(Model),创建一个虚拟dom对象（树）
• 2. 根据虚拟dom生成真正的dom，渲染到页面中
• 3. 当数据变化后（setState()）,重新根据新的数据，创建新的虚拟dom对象（树）
• 4. 与上一次得到的虚拟dom对象，使用Diff算法对比（找不同），得到需要更新的内容
• 5. 最终，React只将变化的内容更新（patch）到Dom中，重新渲染到页面