ReactHooks初体验

什么是Hooks？Hooks是React即将推出的功能，它允许您在不编写类的情况下使用状态和其他React功能。我的理解是，您可以像编写无状态组件一样编写有状态组件。遗憾的是，16.7.0正式版发布后就没有hooks了。如果需要体验，需要下载下一个版本。目前是16.7.0-alpha.2npm我react@next这次给大家分享四个Hooks。一些应该在以后的工作中经常使用。1.useState2.useEffect3.useReducer4.useMemo1.useState个人感觉这个hook是重点。使用它，您可以使用函数来编写有状态组件。importReact,{useState,useEffect}from'react'constHookTest=()=>{const[obj,setValue]=useState({key:'count',value:0});consthandleChange=()=>{constvalue=obj.value+1;//改变状态setValue(Object.assign(obj,{value}));}return(

)}显然，重点在句子const[obj,setValue]=useState({key:'count',value:0}),useState是一个接收状态默认值并返回数组的函数。第一个元素是状态，初始值是传递给函数的默认值。第二个元素是一个方法，可以用来改变状态的值。2.hookuseEffect官方说是componentDidMount、componentDidUpdate和componentWillUnmount三个生命周期的组合，因为它会在组件挂载时执行，更新时执行，更新时执行它被卸载了。然后连接上面的HookTest组件，往里面添加useEffect(()=>{console.log('obj->',obj);return()=>{console.log('unloading..');}});这是一个基本的用法，hang加载、更新、卸载会打印obj对象，在组件更新或卸载时执行返回函数。比如使用setinterval时，可以在return函数中写clearinterval。如果只希望它执行一次，可以向该函数添加第二个参数。useEffect(()=>{console.log('obj->',obj);},false);这样，挂载完成后只执行一次，第二个参数可以为false，[]，{}，""，如果要有条件地执行，可以给第二个参数传入具体的参数useEffect(()=>{console.log('obj->',obj);},{obj.value});如果obj.value的值发生变化，则执行，没有变化则不执行，对性能优化非常友好。3.useReducer如果用过redux的童鞋不会默认，将需要的状态保存成一个对象，所有组件都可以使用。先导入代码importReact,{useReducer,useMemo,useEffect,useState}from'react';//创建reducer，可以在外部创建reducer然后importfunctionreducer(state={count:0},action){switch(action.type){case'reset':return{count:0};case'increment':return{count:state.count+1};case'decrement':return{count:state.count<=0?0:state.count-1};默认值：返回状态；}}//componentconstuseReducerDemo=()=>{const[state,dispatch]=useReducer(reducer,{count:0},{type:'increment'});//异步增加constasyncIncrement=()=>{setTimeout(()=>{dispatch({type:'increment'})},2000);}return()}可以看到和useState很像。它还使用数组解构来接受返回值。首先说一下返回值：1.state自然就是reducer的状态2.Dispatch是一个函数。Dispatch是指我们在使用redux的时候不需要下载中间件（比如redux-thunk）就可以进行异步操作。有关详细信息，请参阅asyncIncrement函数。参数是一个对象，指定需要执行什么说一下useReducer函数在action中的参数：第一个参数是你引入的reducer，第二个参数是state的默认值，第三个参数是初始触发的action，即加载时默认执行action。4.useMemouseMemoonlywhen当其中一个输入改变时才重新计算记忆值。这种优化有助于避免在每次渲染时进行昂贵的计算。这个hook对性能优化也有帮助，接入上面的useReducerDemo组件，添加const[tips,setTips]=useState(false);//为0时提示不能再减少useEffect(()=>{if(!state.count){setTips(true);}else{setTips(false);}});constmemoizedValue=useMemo(()=>{console.log('useMemorun');返回提示},[提示]);在返回组件元素div中添加{memoizedValue&&

cannotbenegative

}，当reducer中的count小于等于0或者从0变为其他数字true或false时进行更新，从而实现p元素的显示，否则会一直获取上次计算的值，我们使用console.log('useMemorun');记录它被更新的次数，当count从0一直+1时，只会打印一次'useMemorun'，也就是说只在0变成1的时候执行一次，memoizedValue的值永远是0变为1时返回的值。这个例子没有说明什么，但是可以体现useMemo在计算量巨大的时候的作用。useMemo也是一个函数，接受两个参数，第一个参数是一个函数，第二个参数是要比较的值，返回一个值。第二个参数可以传入多个值，比如[a,b,c,...]。当传入的值发生变化时，会执行传入的第一个函数，根据业务需求返回计算后的最终结果。同样，如果第二个参数传入的值没有更新，则不会执行。最后花了一个下午去体验hooks，其他的hooks我又用了一遍。感觉这四个在我看来，在我公司的业务中可能用的比较多，所以特发此文分享，同时也记录一下。本人前端新手，第一次写文章，不对的地方还请多多指教。谢谢大家阅读。上面代码的github地址是react-hooks初体验