React父子组件更新策略

父传子

let Child = (props) => {
  console.log("child render");
  return (
    <div></div>
  );
};
const App = () => {
  console.log("father render");
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <>
      {"父组件"}
      <div>
        {count}
        <button onClick={handleClick}>开始</button>
      </div>
      {"子组件"}
      <Child></Child>
    </>
  );
};
export default App;

点击按钮子组件 render ，并引起子组件render

下面这段代码我们点击子组件内部的按钮

let Child = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount((prev) => prev + 1);
  };
  console.log("child render");
  return (
    <div>
      {count}
      <button onClick={handleClick}>开始</button>
    </div>
  );
};
const App = () => {
  console.log("father render");
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <>
      {"父组件"}
      <div>
        {count}
        <button onClick={handleClick}>开始</button>
      </div>
      {"子组件"}
      <Child></Child>
    </>
  );
};
export default App;

打印结果：

可以看出子组件render并不影响父组件。

使用 memo 进行优化

memo 可以进行进行组件的浅比较，与之前 class 组件中的 PureComponents 功能相同。

import React, { useState, memo } from "react";
const Child = memo((props: any) => {
  console.log("child render");
  return <div>{props.count}</div>;
});
const App = () => {
  console.log("fahter render");
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(3);
  const handleClick = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <>
      {"父组件"}
      <div>
        {count}
        <button onClick={handleClick}>开始</button>
      </div>
      {"子组件"}
      <Child count={count1} />
    </>
  );
};
export default App;

打印结果：

通过对比 props 来选中是否进行更新。

当 props 中有 children 的时候

import React, { useState, memo } from "react";
const Child = memo((props: any) => {
  console.log("child render");
  return <div>{props.count.name}</div>;
});
const App = () => {
  console.log("fahter render");
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState({
    name: "chris",
  });
  const handleClick = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <>
      {"父组件"}
      <div>
        {count}
        <button onClick={handleClick}>开始</button>
      </div>
      {"子组件"}
      <Child count={count1}>
        <div>1</div>
      </Child>
    </>
  );
};
export default App;

打印结果如下：

props中带有 children 或者传入一个 reactnode 时不会进行浅比较，会重新渲染组件。

总结

1.父组件更新，子组件会更新（可以使用memo进行优化，对props进行浅比较，防止子组件频繁更新）。

2.子组件内部更新，父组件不会更新（如果子组件调用父组件方法，依旧会更新）。

3.memo 关注于 props，mobx 的 obsersver 关注于 store 内状态。

4.props 中有 children（传入值为 reactnode）时，memo无效。