effect

梗概

• 在React中，effect是一个重要的概念，用于处理组件的副作用操作。副作用操作指的是对外部资源的访问，比如数据获取、订阅事件、手动修改DOM等。
• 只能监听state
  • 因次想要触发effect, 就一定会导致组件重新渲染

实际应用

• child::

  避免不必要的effect

  示例

  For example, you don’t need an Effect to adjust some state based on other state:

  function Form() {
    const [firstName, setFirstName] = useState('Taylor');
    const [lastName, setLastName] = useState('Swift');
   
    // 🔴 Avoid: redundant state and unnecessary Effect
    const [fullName, setFullName] = useState('');
    useEffect(() => {
      setFullName(firstName + ' ' + lastName);
    }, [firstName, lastName]);
    // ...
  }

  上面的写法是多余的，和下面代码的作用完全一致：

  function Form() {
    const [firstName, setFirstName] = useState('Taylor');
    const [lastName, setLastName] = useState('Swift');
    // ✅ Good: calculated during rendering
    const fullName = firstName + ' ' + lastName;
    // ...
  }

  • base::函数组件的生命周期钩子

  指向原始笔记的链接