react Effect副作用 - 避免滥用Effect

react Effect副作用

基础概率

阅读文章
React新文档：不要滥用effect哦
react 中文文档

什么是纯函数? 什么是副作用函数?

纯函数

仅执行计算操作，不做其他操作，这类函数通常被称为纯函数。

纯函数的特征
1.只负责自己的任务，它不会更改在该函数调用前就已存在的对象或变量。
2.输入相同，则输出相同，给定相同的输入，纯函数应总是返回相同的结果。

React 便围绕着这个概念进行设计，假设编写的所有组件都是纯函数。

React 的渲染过程必须自始至终是纯粹的，不改变在渲染前，就已存在的任何对象或变量。 – 这将会使其变得不纯粹，也就是我们说的产生副作用。

/*
 案例1：不纯粹组件的写法
 该组件正在读写其外部声明的 guest 变量。这意味着 多次调用这个组件会产生不同的 JSX！并且，如果 其他 组件读取 guest ，它们也会产生不同的 JSX，其结果取决于它们何时被渲染！这是无法预测的。
*/
let guest = 0;

function Cup() {
   
   
  // Bad：正在更改预先存在的变量！
  guest = guest + 1;
  return <h2>Tea cup for guest #{
   
   guest}</h2>;
}

export default function TeaSet() {
   
   
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

// 案例2：纯粹组件的写法
function Cup({
    
     guest }) {
   
   
  return <h2>Tea cup for guest #{
   
   guest}</h2>;
}

export default function TeaSet() {
   
   
  return (
    <>
      <Cup guest={
   
   1} />
      <Cup guest={
   
   2} />
      <Cup guest={
   
   3} />
    </>
  );
}

React 提供了 “严格模式”，在严格模式下开发时，会调用每个组件函数两次。通过重复调用组件函数，严格模式有助于找到违反这些规则的组件。严格模式在生产环境下不生效，因此不会降低应用程序的速度。如需引入严格模式，可以用 <React.StrictMode> 包裹根组件。

副作用函数

在 React 中，副作用通常属于 事件处理程序。事件处理程序是 React 在你执行某些操作（如单击按钮）时运行的函数。即使事件处理程序是在组件内部定义的，它们也不会在渲染期间运行！ 因此事件处理程序无需是纯函数。

可以理解副作用为：额外发生的事情，与渲染过程无关。

如果无法为副作用找到合适的事件处理程序，可以选择使用useEffect。

什么时候使用Effect

React中有两个重要的概念

• Rendering code渲染代码是不带副作用的纯函数，开发者编写的组件渲染逻辑，最终会返回一段JSX。

  // 渲染代码
  function App() {
       
       
  const [age, setAge] = useState(10);
  return <div>{
       
       age}</div>;