react useEffect(个人笔记,非教程)

1.在第一次渲染之后和每次 界面更新 之后都会执行传入的函数,React 保证了每次运行 effect 的同时,DOM 都已经更新完毕

无需清除的effect

useEffect(() => {
	// 每次界面重新渲染之后就会执行 
	// 类似在 componentDidMount 和 componentDidUpdate 中同时传入该回调函数
	// 
    document.title = `You clicked ${count} times`;
  });

需要清除的effect

useEffect(() => {
	// 每次界面重新渲染之后就会执行
    window.addEventListener("resize", onResize);
    // 执行下一次的effect之前会执行本方法, 
    // 意思是: 每次界面更新本方法都会执行 
    // 所以会导致不停的 绑定 和 解绑
    // 这会导致性能问题
    // 解决方法在下面
    return function cleanup() {
      window.removeEventListener("resize", onResize);
    };
  });

在某些情况下,每次渲染后都执行清理或者执行 effect 可能会导致性能问题
如果某些特定值在两次重渲染之间没有发生变化,你可以通知 React 跳过对 effect 的调用,
只要传递数组作为 useEffect 的第二个可选参数即可:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 只有  首次渲染  和   count更改   时才执行effect, 其他数据改变都不执行

如果想执行只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([])作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值,所以它永远都不需要重复执行

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []); // 仅在组件挂载和卸载时执行

你可能感兴趣的:(react)