什么是Hooks？Hooks是react即将推出的功能，它允许您在不编写类的情况下使用状态和其他React功能。我的理解就是可以用写无状态组件的方式去编写拥有状态的组件。遗憾的是，正式版16.7.0出了之后并没有hooks，如果需要体验还需下载next版本，目前是16.7.0-alpha.2npm i react@next这次与大家分享五个Hooks，个人觉得这几个应该是之后工作中会经常使用到的。 1. useState 2. useEffect 3. useReducer 4. useMemo1.useState个人感觉这个钩子是重点，使用它即可做到用函数的编写带有状态的组件。import React,{ useState，useEffect } from ‘react’const HookTest = () => { const [obj,setValue] = useState({key:‘count’,value:0}); const handleChange = () => { const value = obj.value+1; //改变状态 setValue(Object.assign(obj,{value})); } return ( <div> {obj.key}:{obj.value} <p> <button onClick={handleChange}>累加</button> </p> </div> )}很明显，重点在于const [obj,setValue] = useState({key:‘count’,value:0})这一句，useState是个函数，接收一个状默认值，返回一个数组，第一个元素为状态，初始值为传入函数的默认值，第二个元素为方法，可使用此方法改变状态的值。2.useEffect这个钩子，官方所说是componentDidMount，componentDidUpdate和componentWillUnmount这三个生命周期的结合，因为组件挂载完成时会执行，更新时会执行，卸载时会执行，接上面的HookTest组件，往里添加useEffect(()=>{ console.log(‘obj->’,obj); return ()=>{ console.log(‘卸载时..’); }});这就是一个基本用法，挂载、更新、卸载都会打印obj对象，return的函数，作为组件更新或者卸载时执行，比如在使用setinterval,可以在return的函数里写clearinterval。如果只想让它执行一次的话，可以往函数里添加第二个参数。useEffect(()=>{ console.log(‘obj->’,obj);},false);这样只在挂载完成时执行一次，第二个参数可以为false、[]、{}、““如果想让他有条件的执行，可以往第二个参数传入具体的参数useEffect(()=>{ console.log(‘obj->’,obj);},{obj.value});如果obj.value值变化时，就执行，没变化时就不执行，对于性能优化非常友好。3.useReducer如果使用过redux的童鞋们不会默认，将需要的状态保存到一个对象中，可供所有的组件使用。先上代码import React, { useReducer,useMemo } from ‘react’;//创建reducer，reducer可在外部创建然后再引入function reducer(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 }; default: return state; }}//组件const useReducerDemo = () => { const [state, dispatch] = useReducer(reducer, { count: 0 }, { type: ‘increment’ }); //异步增加 const asyncIncrement = () => { setTimeout(()=>{ dispatch({ type: ‘increment’ }) },2000); } return ( <div> <p> <span>Count: {state.count}</span> <button onClick={() => dispatch({ type: ‘reset’ })}>还原</button> <button onClick={() => dispatch({ type: ‘increment’ })}>+</button> <button onClick={() => dispatch({ type: ‘decrement’ })}>-</button> <button onClick={asyncIncrement}>async+</button> </p> </div> )}可以看到，和useState很像，也是使用一个数组解构接受返回的值。先说返回的值：1.state自然为reducer的状态2.dispatch这个是一个函数，有dispatch就意味着我们可以不用像使用redux时还需要自己下中间件（如redux-thunk）就可以进行异步操作，具体看asyncIncrement函数,参数为一个对象，指定需要执行的action再说useReducer函数的参数：第一个参数为你引入的reducer，第二个参数为state的默认值，第三个参数为初始触发的action，就是载入时默认就执行一个action4.useMemouseMemo只有当其中一个输入发生变化时，才会重新计算记忆值。此优化有助于避免在每个渲染上进行昂贵的计算。此钩子也是有助于性能优化，接入上面的useReducerDemo组件，往里添加const memoizedValue = useMemo(() => { console.log(‘useMemo run’); return 改变了${tips}}, [tips]);在return组件元素div里添加<p>{memoizedValue}</p>useMemo同样也是一个函数，接受两个参数，第一个参数为函数，第二个参数为要比对的值，返回一个值。第二个参数里可以传入多个值，如[a,b,c,…]，当传入的这些值有变化时，就会去执行第一个传入的函数，根据业务需求计算后返回最终结果。同理，第二个参数传入的值没有更新时，不会执行。结尾花了一下午的时间体验hook，其他的钩子也使用了个遍，感觉这四个在我看来和在我公司业务里可能会大量的使用到，所以发此文章分享，也为记录，本人新手前端一枚，写错的话请多多指教。谢谢大家的阅读。以上代码的github地址为react-hooks初体验