react管理渲染问题详解【王道react】

react管理渲染问题

有了react管理渲染问题，还得有人帮你维护一堆本地变量啊。redux就管这个事。redux的思路是，有一个全局对象store，存着所有(被验证的)信息和状态，比如用户id啦，还有一页显示多少条标题什么的。然后再把信息或者状态与对应的ui组件连起来，把store里的state注入到组件property里面，这样你只要改变store里的信息，组件就可以自动刷新了。

import React from 'react' 
export default function asign() {
  return (
    <div>
      
    </div>
  )
}

react组件

1 react组件有三种状态 Mounted(已插入真实的DOM) Updating(正在被渲染) 和 Unmounted已移除真实DOM

2 每个状态有两种处理方法 will(进入状态之前调用) 和 did(进入状态之后调用)

3 三种状态总共有5种处理方法, componentWillMount(插入真实DOM之前调用) componentDidMount(插入真实DOM之后调用) componentWillUpdate(被渲染之前调用) componentDidUpdate(渲染之后调用) 和 componentWillUnmount(移除之前调用)

4 当然还有组件初始方法: getDefaultProps(获取默认属性) 和 getInitialState(获取初始状态),

5 还有两种特殊方法: componentWillReceiveProps(object nextProps)(已加载的组件收到新的参数时调用) 和 shouldComponentUpdate(object nextProps, object nextState)(判断组件是否需要重新渲染时调用)

此时 useMemo 所缓存的信息完全无法被复用，组件树不可避免地 re-render。这种情况，useMemo 当然画蛇添足，平添开销。反过来看，如果 daishi KATO 文章表述的更准确的话，说明 Parent 组件属于非顶层组件，即 Parent 可能因为 props 等非 stateA 变化的原因，产生了重新渲染，那么结合 Memo 机制，此处的 useMemo 能起到作用。比如：

const App = () => {
  // ...
  return (
    <Root>
      <Parent data={data} />
    </Root>
  );
};

这种情况更符合生产实际情形，但是即便 useMemo 提供了 memorized data，也并不一定就是 performance friendly 的最佳实践。