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 的最佳实践。