React Tips

记录React开发时遇到的一些问题的解决方法和想法

key

• Q:为什么要有key？

• A:diff的时候可以直接对比key，复用一些未更新的node，提高效率。。。

• 我遇到的场景：页面左侧是菜单，右侧是菜单对应的table，当菜单menuItem变了那么对应的tableContent也要展示出来，而tableContent变了时要保存，如果未保存就去切换菜单，那么需要给出提示，点击保存/取消之后才能切换。

• 问题来了：右侧table单独抽成一个组件（因为别的地方也要用），然后抛出contentChanged，content等字段给左侧/全局，用于切换角色时判断table内容有无变化，而table的初始值是不一定相同的，那么我需要这个table组件自己去维护自己的状态，比如初始化的时候contentChanged=false，content=接口返回的数据/[]，而这个table组件又需要接收menuItem来获取对应的数据，这时，如果不给table组件加一个key={menuItem}的话，那么我切换左侧menuItem之后，组件抛出来的content就不会被重新初始化，那么我此时去保存这个tableContent就会出现bug——明明table里是空的，而保存之后table里反而有了数据，这数据还是上一个menuItem对应的数据。而解决这个bug只需要给table组件加个key，让它跟menuItem绑定，menuItem改变时table组件会销毁重新创建，那么content自然也会跟着初始化。

How to get the previous props or state?

• example:

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Now: {count}, before: {prevCount}</h1>;
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}