关于 React Hook 的问题, 如何避免子组件不必要的更新?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 919 天前的主题，其中的信息可能已经有所发展或是发生改变。

代码大致逻辑如下, const b 基于 a 生成(实际上 a 是通过 props 传进来的),并传递给组件 Child.
根据输出可以注意到子组件 Child 被调用了两次.
怎么做才能避免 Child 不必要二次更新呢?

function createB(a) {
  return { a };
}

export default function Index() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(createB(a));

  useEffect(() => {
    console.log('b', b);
    setB(createB(a));
  }, [a]);

  return <Child b={b}></Child>;
}

function Child(props) {
  const b = props.b;
  useEffect(() => {
    console.log('child b', b);
  }, [b]);
  return <div>{b.a}</div>;
}

输出

child b {a: 0}
b {a: 0}
child b {a: 0}

第 1 条附言 · 2022-05-20 21:27:07 +08:00

呃, 解决了, 加个 useRef 跳过 componentDidMount 就行了.

```
export default function Index() {
const [a, setA] = useState(0);
const [b, setB] = useState(createB(a));
const first = useRef(true);
useEffect(() => {
if (first.current) {
first.current = false;
return;
}
console.log('b', b);
setB(createB(a));
}, [a]);

return <Child b={b}></Child>;
}

```

第 2 条附言 · 2022-05-20 21:29:26 +08:00

b 是个很复杂的树形结构对象, 用 React.memo 判断是否相同很麻烦.

第 3 条附言 · 2022-05-20 21:48:31 +08:00

useMemo 是个好办法, 直接一行就搞定了.

```
export default function Index() {
const [a, setA] = useState(0);
const b = useMemo(() => createB(a), [a]);

return <Child b={b}></Child>;
}
```

第 4 条附言 · 2022-05-20 21:54:40 +08:00

唉, 传入数据 a 生成 b. 然后组件内操作导致 b 更新后又要转成 a 传出去, 最后 a 又传进来转回 b.
感觉像吃饱了撑的.

3 条回复