React之Hook

react之Hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

可以很方便的复用状态（state）的逻辑

1、useState

在函数组件中，也可以拥有自己的状态（state），不要在切回class;useState的初始值，只在第一次有效。

const Hook = function(){
         const  [fruit,setFruit] =  React.useState("苹果");//接受的参数就是当前定义状态的初始值，返回一个数组，数组里面包含了 当前的状态和修改状态的函数
         const handleCount = ()=>{ 
              setFruit("香蕉")
         }
 return (
             <div>
                 <p>我喜欢的水果：{ fruit }</p>
                 <button onClick={ handleCount }>现在喜欢吃香蕉</button>
                 <hr />
             </div>
         )
      }
 ReactDOM.render( 
            <div>
                <Hook />
            </div>,
       document.getElementById('app') 
    );

注意：useState的初始值，只在第一次有效

2、userEffect

可在函数组件中使用class的生命周期函数，还是函数的合体

(componentDidMount，componentDidUpdate，componentWillunmMunt)

React.useEffect(()=>{ //第一个参数为回调函数，第二个参数就是控制它是以哪一种生命周期钩子函数存在
            //发生异步请求，模拟componentdidmount，第二个参数为空数组
            //模拟componentdidupdate，第二个参数为想在一个数组的值改变的时候才执行
            // 第二个参数为空的时候，是当属性或者状态发生改变后，视图从新render之后调用componentDidUpdate
             setTimeout(() => {
                 setFruit("栗子")
             }, 2000);


         },[fruit]) //当前副作用钩子执行的依赖

只在第一次使用（CDM),加载异步数据

监听某一个字段更新

3、useRef

useRef返回的值相当于当前组件的全局作用域，一处被修改，其他地方跟着更新

const inputer = React.useRef(null) // 通常都是赋值给一个虚拟DOM节点，用来操作DOM

4、useMemo

用来对数据的缓存,memo 相当于是class组建的 pureComponent

5、useCallback

用来缓存函数的。

6、useReducer

是usestate的代替方案，需要把状态经过运算、依赖上一次的状态。

7、useContext

让函数式组件中，也能够拿到context里面的数据，用来做组件数据传递

hook的使用规则：不要循环，条件或者嵌套函数中调用hook。不要在普通js函数中使用。