【React 6/100】 React原理 | setState | JSX语法转换

****关键字 | setState | JSX语法转换 | 组件更新机制

组件更新机制

setState() 的两个作用
- 修改state
- 更新组件
过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）

组件性能优化

减轻state

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

避免不必要的重新渲染

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

// 生成随机数

class RandomNumber extends React.Component {

    state = {

        number: 0

    };

    btnHandlerClicked = () => {

        this.setState((state, props) => {

          return {

              number: Math.ceil(Math.random() * 3)

          }

        })

    };

    // 两次生成的随机数可能相同，如果相同就没必要重新渲染

 	// 将要更新UI的时候会执行这个钩子函数

    shouldComponentUpdate(nextProps, nextState, nextContext) {

        console.log('nextProps: ',nextProps ,' -- nextState： ' , nextState , ' -- nextContext' , nextContext , ' -- this.state', this.state);

        if(nextState.number !== this.state.number || nextProps.sendnumber !== this.props.sendnumber){

            return true;

        }

        return false;

    }

    render() {

        console.log('render -- ');

        return (

            <div>

                <h2>随机数: {this.state.number}</h2>

                <button onClick={this.btnHandlerClicked}>clickedMe create random number</button>

            </div>

        )

    }

}

// 渲染

ReactDOM.render(<RandomNumber/>, document.getElementById('root'));

纯组件

作用以及使用

纯组件： PureComponent 与 React.Component 功能相似
区别： PureComponent 内部自动实现了 shouldComponentUpdate钩子，不需要手动比较

原理：纯组件内部通过分别比对前后两次 props和state的值，来决定是否重新渲染组件

// 生成随机数

class RandomNumber extends React.PureComponent {

    state = {

        number: 0

    };

    btnHandlerClicked = () => {

        this.setState((state, props) => {

            return {

                number: Math.ceil(Math.random() * 3)

            }

        })

    };

    render() {

        console.log('render -- ');

        return (

            <div>

                <h2>随机数: {this.state.number}</h2>

                <button onClick={this.btnHandlerClicked}>clickedMe create random number</button>

            </div>

        )

    }

}

// 渲染

ReactDOM.render(<RandomNumber sendnumber={1234}/>, document.getElementById('root'));

实现原理

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

// 正确做法：创建新对象

const newObj = { ...this.state.obj, number: Math.floor(Math.random() * 3) }

this.setState(() => {

    return {

        obj: newObj

    }

})

// 错误演示：直接修改原始对象中属性的值

const newObj = this.state.obj；

newObj.number = Math.floor(Math.random() * 3)

this.setState(() => {

    return {

        obj: newObj

    }

})

巴特西

【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

组件更新机制

组件性能优化

减轻state

避免不必要的重新渲染

纯组件

作用以及使用

实现原理

最新文章

热门文章