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

2021-05-14 01:28

阅读:671

标签:相同   转换   rand   floor   log   tco   class   ceil   reac   

****关键字 | 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 (
            

随机数: {this.state.number}

) } } // 渲染 ReactDOM.render(, 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 (
                

    随机数: {this.state.number}

    ) } } // 渲染 ReactDOM.render(, 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语法转换 | 组件更新机制

标签:相同   转换   rand   floor   log   tco   class   ceil   reac   

原文地址:https://www.cnblogs.com/YangxCNWeb/p/11994536.html

上一篇:Ajax

下一篇:写一个js配合rem


评论


亲,登录后才可以留言!