Javascript 反应挂钩：什么/为什么“使用效果”？

关于新提议的方案

Effect

hook（

useffect（）

）的优点和用例是什么

为什么它更可取？它与

componentDidMount/componentdiddupdate/componentWillUnmount

（性能/可读性）有何不同

文件指出：

函数组件的主体（称为React的呈现阶段）中不允许出现突变、订阅、计时器、日志记录和其他副作用

但我认为在生命周期方法（如componentDidUpdate等）中使用这些行为而不是渲染方法已经是常识了

还有人提到：

传递给useEffect的函数将在渲染提交到屏幕后运行

但这不正是

componentDidMount

和

componentdiddupdate

所做的吗？

下面是丹·阿布拉莫夫演讲中的一个例子，解释了两者的区别：

---

以下是以下示例中的一些发现：

您将使用钩子编写更少的样板代码

使用

useffect（）访问生命周期更新和状态更新

关于性能，一个方面是：

与componentDidMount和componentDidUpdate不同，传递给useEffect的函数在延迟事件期间在布局和绘制之后激发

代码共享太容易了，useEffect（）可以在同一个组件中为不同的目的多次实现

通过将数组作为第二个参数传递给

useffect（）

hook，您可以更有效地控制组件重新渲染。当您只传递空数组[]以仅在装载和卸载时渲染组件时，该钩子非常有效

使用多个

useffect（）

钩子来分离关注点并作出反应：

Hooks允许我们根据代码所做的事情而不是生命周期方法名称来拆分代码。React将按照指定的顺序应用组件使用的每个效果

---

使用类：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0
};
}
componentDidMount（）{
document.title=`您单击了${this.state.count}次'；
}
componentDidUpdate（）{
document.title=`您单击了${this.state.count}次'；
}
render（）{
返回(
您单击了{this.state.count}次

this.setState（{count:this.state.count+1}）}>
点击我
);
}
}

使用挂钩：

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

从'react'导入{useState，useffect}；
函数示例（）{
const[count，setCount]=useState（0）；
//与componentDidMount和componentDidUpdate类似：
useffect（（）=>{
//使用浏览器API更新文档标题
document.title=`您单击了${count}次`；
});
返回(
您单击了{count}次

设置计数（计数+1）}>
点击我
);
}

Effect

hook（

useffect（）

）的优点和用例是什么

优势 首先，钩子通常支持提取和重用跨多个组件通用的有状态逻辑，而不需要高阶组件或渲染道具

第二个好处（特别是效果挂钩）是避免了在

componentdiddupdate

中未正确处理依赖于状态的副作用时可能出现的错误（因为效果挂钩确保在每次渲染时都设置并拆除这些副作用）

另请参见下文详述的性能和可读性优势

用例 任何使用生命周期方法实现有状态逻辑的组件，效果挂钩都是一种“更好的方法”

为什么它更可取？它与

componentDidMount

/

componentdiddupdate

/

componentWillUnmount

（性能/可读性）有何不同

为什么更可取 由于上面和下面详述的优点

它与生命周期方法的区别 演出 效果挂钩-

• 感觉比生命周期方法更灵敏，因为它们不会阻止浏览器更新屏幕
• 但是会在每次渲染时设置并删除副作用，这可能会很昂贵
• …因此可以优化为完全跳过，除非已更新特定状态

可读性 效果挂钩导致：

• 由于能够将以前必须在同一组生命周期方法中表达的不相关行为拆分为针对每种此类行为的单个挂钩，因此组件更简单、更易于维护，例如：

  componentDidMount() {
    prepareBehaviourOne();
    prepareBehaviourTwo();
  }
  
  componentDidUnmount() {
    releaseBehaviourOne();
    releaseBehaviourTwo();
  }
  

  componentDidMount() {
    doStuff();
  }
  
  componentDidUpdate() {
    doStuff();
  }
  

  变成：

  useEffect(() => {
    prepareBehaviourOne();
    return releaseBehaviourOne;
  });
  
  useEffect(() => {
    prepareBehaviourTwo();
    return releaseBehaviourTwo;
  });
  

  useEffect(doStuff); // you'll probably use an arrow function in reality
  

  请注意，与

  行为一

  相关的代码现在与与

  行为二

  相关的代码明显分离，而在此之前，它混合在每个生命周期方法中。

• 由于不需要在多个生命周期方法中重复相同的代码（例如，

  componentDidMount

  和

  componentdiddupdate

  之间常见的代码），因此样本较少-例如：

  componentDidMount() {
    prepareBehaviourOne();
    prepareBehaviourTwo();
  }
  
  componentDidUnmount() {
    releaseBehaviourOne();
    releaseBehaviourTwo();
  }
  

  componentDidMount() {
    doStuff();
  }
  
  componentDidUpdate() {
    doStuff();
  }
  

  变成：

  useEffect(() => {
    prepareBehaviourOne();
    return releaseBehaviourOne;
  });
  
  useEffect(() => {
    prepareBehaviourTwo();
    return releaseBehaviourTwo;
  });
  

  useEffect(doStuff); // you'll probably use an arrow function in reality
  

---

状态更改时，useEffect将运行

import { useState, useEffect } from 'react';
function Example() {
  const [Age, setAge] = useState(33);
  const [Somestate,setSomestate]=useState(initilaestate);
  useEffect(() => {
    console.log('the age is changed to ',Age);
  });

// you can use useEffect as many times you want in you component 
  useEffect(() => {
    console.log('the age is changed to ',Age);
  },[someState]);//here you tell useEffect what state to watch if you want to watch the changing of a  particular state and here we care about someState
  return (
    <div>
      <p>age increased to  {Age}</p>
      <button onClick={() => setAge(count + 1)}>
       Increase age by One
      </button>
    </div>
  );
}
```

从'react'导入{useState，useffect}；
函数示例（）{
常数[年龄，设置]=使用状态（33）；
const[Somestate，setSomestate]=useState（initilaestate）；
useffect（（）=>{
console.log（'年龄更改为'，年龄）；
});
//可以在组件中多次使用useEffect
useffect（（）=>{
console.log（'年龄更改为'，年龄）；
}，[someState]）；//这里告诉useEffect如果你想观察某个特定状态的变化，应该观察什么状态，这里我们关心