一直在用react开发，组件都是class方式定义，确实会觉得写这么多class好繁琐，这不大佬们就出来解决我们小白的问题了。
还是先写点文档上面的东西吧，Hook啊React 16.8d 新特性，（我写文章的时候已经16.13.1了）它的目的就是让我们开发的时候可以不编写class也能使用state，以及一些其他特性。
常用的API
- 下面只会是写我总结出来的了，可能有问题大家可以对照文档 去再看
中文官网
useState
他是要成对出现的，例如：
import React,{useState} from ' react'
function Test(){
cons [fruit ,setFruit] = useState('banana');
}
这段代码中方括号他是什么意思呢,我们要知道一个东西就是数组解构它意味着我们同时创建了 fruit 和 setFruit 两个变量，fruit 的值为 useState 返回的第一个值，setFruit 是返回的第二个值。它等价于下面的代码：
var fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
var fruit = fruitStateVariable[0]; // 数组里的第一个值
var setFruit = fruitStateVariable[1]; // 数组里的第二个值
使用的时候直接把之前的this.setState换成setFruit就ok了
我们在定义的时候是可以定义多个的例如上面的代码我们是可以这样：
import React,{useState} from ' react'
function Test(){
cons [fruit ,setFruit] = useState('banana');
cons [fruit2 ,setFruit2] = useState('banana2');
...
}
只要是一一对应就行了
其他后面的useEffect也是一样
useEffect
副作用翻译过来估计，我看到的就是之前在componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数中做的事情他一个人包了。
定义和使用就不啰嗦了和useState一样，只是我们经常会有这样的需求就是在DOM渲染完监听事件，在组件卸载的时候移除监听，在这里我们就要这样去写：
import React, {useEffect } from 'react';
function Test() {
useEffect(() => {
document.addEventListen('clcik',fn)
return function cleanup() {
document.removeEventListen('clcik',fn)
};
});
}
这只是一个示例，我们在useEffect中返回一个函数，React在卸载的时候会调用他
effect 的条件执行
默认情况下，effect 会在每轮组件渲染完成后执行。这样的话，一旦 effect 的依赖发生变化，它就会被重新创建。
然而，在某些场景下这么做可能会矫枉过正。比如，我们不需要在每次组件更新时都创建新的订阅，而是仅需要在 source prop 改变时重新创建。
要实现这一点，可以给 useEffect 传递第二个参数，它是 effect 所依赖的值数组。更新后的示例如下：
useEffect(
() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source],
);
其他注意的：
我模拟抽离公共副作用函数的时候需要用use开头驼峰命名
不要在循环里面使用Hook,要在最外层使用
网友评论