Hooks的来源Hooks => 钩子，顾名思义，为了解决在函数组件（Function Component）中使用state和生命周期，同时提高业务逻辑复用。 Function Component == Puer Render Function 函数组件等同于一个纯的专门用作渲染的函数，我们知道，在函数组件中，我们无法使用state和生命周期，这也是Hooks为了解决的问题。第一个API: useStateimport { useState } from react // 引入const [count, setCount] = useState(0) 相当于this.state ={ count = 0} 所以 useState(arg)放数组 字符串 对象都可以，就是起到一个初始化state的作用setCount 相当于 this.setState({count: count})count = count + 1 这样的写法是错的，不能直接修改state的值，需要使用setCount(value)我们可以声明多个状态第二个API: useEffect这个函数是为了解决当状态或者传入的props发生变化后，需要做出的逻辑处理比如： count + 1 后， 就会触发useEffect( () => {// 逻辑处理在这里}, [count]) //第二个参数是绑定需要监听变化的参数下面是一个完整的例子父组件中传入的props value 每秒 + 1 父组件就不贴代码了，文末有完整代码地址这个项目里包含自定义Hook 以及useEffect的触生命周期，包含自身state以及父组件传入prop改变后，useEffect的用法import React from ‘react’;import { useState, useEffect } from ‘react’;// 自定义hooksfunction diyHooks (value) { const [flag, setFlag] = useState(false); useEffect(() => { if(value % 2 === 0) { setFlag(true) } else { setFlag(false) } console.log(flag) }, [value]) return flag;}function Try (props) { const [count, setCount] = useState(0) const [number, setNumber] = useState(0) const value = props.value const flag = diyHooks(props.value) useEffect(() => { console.log(‘count’, count); }, [count]) useEffect(() => { console.log(’number’, number); }, [number]) useEffect(() => { console.log(‘props’, value) }, [value]) return ( <div> <span>{flag === true ? ’true’ : ‘false’}</span> <span>{value}</span> <button onClick={() => { setCount(count + 1) if(count % 2 === 1) { setNumber(number + 1) } }}>Try It</button> </div> )}export default Try;关于自定义hooks，我写了一个react-hooks 介绍了React Hooks的简单用法