react hooks使用_用React Hooks重新思考组件

react hooks使用

自从React 16.8以来，React Hooks一直存在，并且一如既往地受欢迎和需求旺盛。 他们引入了一种全新的方法来处理React中的组件，这可能会导致您重新评估您的基础编码方法。 根据Stackoverflow人气调查，React已经被确立为最受欢迎的前端框架，因此在引入Hooks之后，React超越了一切 。

乍一看，React Hooks似乎可以替代类，甚至可以直接替代。 但是，许多人表达了这种观点，这是错误的。 React Hooks绝不等同于类。 这个概念既有所不同，又有所实现，因此从表面上看，看起来很像，是一个全新的概念。

对于Hooks，需要一种具有严格数学逻辑的声明性方法。 在新版本中，React改变了函数式编程的方法，自从80年代流行以来，OOP一直是人们舒适居住的地方。 这以几种方式表现出来。 现在，功能已成为React的中心点，将重点从类上转移了出去。 结果，我们有了完全不同的渲染方法，我们将通过以下示例进行说明。

让我们从类开始。 我们定义一个起始值为零的componentDidMount ，并使用componentDidMount设置状态达到5000时的超时。

exportdefault class App extends React . Component  {

  state = {value: 0 }
  componentDidMount() {
  setTimeout(() => 
    console.log( this .state.value), 5000 );
}

我们的组件是一个按钮，该按钮将返回由状态更改触发的每个渲染的点击次数。 每次onClick ，值将更改为value +1 。

render() {return (
		< button
		onClick = {
() => this.setState(({ value }) => ({ value: value + 1 }))}
		>
                        click on me
		</ button >
	)
}

组件（类）中的此全局对象是一个单例，每个实例都具有指向状态的链接。 每个渲染中都将是相同的，这意味着如果您打开页面并单击几次按钮，控制台中将显示的数字将向您显示确切地单击了按钮的次数。 这显示了渲染如何引用单个对象。

使用Hooks，结果将完全不同，并且更类似于JS中的函数。 在每个渲染上，都会产生一个新的环境，因此每次您都会获得一组新的数据。

让我们看一个例子。

我们借助useState挂钩将初始状态设置为零。

export default function App ()  {
	let [state, setState] = React.useState({ count : 0 });
        }

然后，我们使用useEffect挂钩为点击次数达到5000时设置超时。在上一个示例中，我们通过使用componentDidMount实现此目的。

React.useEffect(() => {
	   setTimeout( () => {
		  console .log(state.count);
	   }, 5000 );
}, []);

同样，我们将计算每次onClick状态更改为state + 1按钮的点击次数。

return (
	    < button
		   onClick = {() => {
			       setState(state => state +1);
		   }}
	    >
		   increase count
	    </ button >
    );

React解释了状态Hook中的所有更改，每次触发渲染时都调用功能组件。 这意味着所有变量和函数都是封闭的，因此在每个渲染器上都不同。

实际上，这意味着，如果我们采用相同的示例，但使用React Hooks进行表达，则在渲染过程中单击按钮时，输出将为零。 在每个渲染上， state和useEffect将有所不同。

这是值得学习和在代码中使用的东西。 如果您仍然不确定为什么需要进行此更改，请详细了解React Hooks及其引入的原因。 您会看到Hooks是React的一个很好的补充，一旦开始使用它们，您将立即获得好处。

翻译自: https://hackernoon.com/rethinking-components-with-react-hooks-bdec3yi2

react hooks使用