本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。
React Hook是什么？
React官网是这么介绍的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
完全可选的你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
100% 向后兼容的Hook 不包含任何破坏性改动。
现在可用Hook 已发布于 v16.8.0。
没有计划从 React 中移除 class你可以在本页底部的章节读到更多关于 Hook 的渐进策略。
Hook 不会影响你对 React 概念的理解恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。
如果对react还不够了解建议先看下react官方文档，写写demo再来看文章，因为有的react基础的东西我就一笔带过不细说。react 官方文档 https://zh-hans.reactjs.org/docs/hooks-state.html
React提供的Hook
| hook | 用途 |
|---|---|
| useState | 设置和改变state，代替原来的state和setState |
| useEffect | 代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版 |
| useLayoutEffect | 与 useEffect 作用相同，但它会同步调用 effect |
| useMemo | 控制组件更新条件，可根据状态变化控制方法执行,优化传值 |
| useCallback | useMemo优化传值，usecallback优化传的方法，是否更新 |
| useRef | 跟以前的ref，一样，只是更简洁了 |
| useContext | 上下文爷孙及更深组件传值 |
| useReducer | 代替原来redux里的reducer,配合useContext一起使用 |
| useDebugValue | 在 React 开发者工具中显示自定义 hook 的标签，调试使用。 |
| useImperativeHandle | 可以让你在使用 ref 时自定义暴露给父组件的实例值。 |
1.useState
import React from "react";import "./App.css";//通常的class写法,改变状态class App extends React.Component { constructor(props){ super(props) this.state = { hook:"react hook 是真的好用啊" } } changehook = () => { this.setState({ hook:"我改变了react hook 的值" }) } render () { const { hook } = this.state return( {hook} ) }}export {App}//函数式写法,改变状态function App() {//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’ const [hook, sethook] = useState("react hook 是真的好用啊"); return ( {hook}{/**这里的变量和方法也是可以直接使用的 */} );}export {App}//箭头函数的函数写法,改变状态export const App = props => { const [hook, sethook] = useState("react hook 是真的好用啊"); return ( {hook} );};使用方法备注在上面的demo中看完上面useState的对比使用，一个小的demo结构更清晰，代码更简洁，更像写js代码，运用到项目中，那岂不是美滋滋。
2.useEffect & useLayoutEffect
useEffect代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版 useEffect( ()=>{ return ()=>{ } } , [ ])
第一个参数，是函数，默认第一次渲染和更新时都会触发，默认自带一个return ，return一个函数表示可以再销毁之前可以处理些事情第二个参数，数组【】，空的时候表示只执行一次，更新时不触发，里面的参数是什么，当参数变化时才会执行useEffectuseEffect可以多次使用，按照先后顺序执行useLayoutEffect强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数import React, { useState, useEffect, useLayoutEffect } from "react";//箭头函数的写法，改变状态const UseEffect = (props) => {//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’const [ hook, sethook ] = useState("react hook 是真的好用啊");const [ name ] = useState("baby张");return (UseEffect
{props.name}
{newhook});};export default UseEffect;3.useMemo & useCallback
他们都可以用来优化子组件的渲染问题，或者监听子组件状态变化来处理事件，这一点在以前是很难做到的，因为shouldComponentUpdate 里能监听到是否变化，但没法控制其他的外部方法，只能返回true和false,而componentDidUpdate只能在更新后执行，所以想在渲染之前做些事情就不好搞了。 useCallback目前还不能用
import React, { useState, useMemo } from "react";const Child = ({ age, name, children }) => { //在不用useMemo做处理的时候，只要父组件状态改变了，子组件都会渲染一次，用了useMemo可以监听某个状态name，当name变化时候执行useMemo里第一个函数 console.log(age, name, children, "11111111");function namechange() {console.log(age, name, children, "22222222");return name + "change"; } {/** react 官网虽说useCallback与useMemo的功能差不多，但不知道版本问题还怎么回是，这个方法目前还不能用 const memoizedCallback = useCallback( () => { console.log("useCallback") }, [name], ); console.log(memoizedCallback,"memoizedCallback") */} //useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化const changedname = useMemo(() => namechange(), [ name ]);return (children：{children}
name：{name}
changed：{changedname}
age：{age}
);};const UseMemo = () => { //useState 设置名字和年龄，并用2两个按钮改变他们，传给Child组件const [ name, setname ] = useState("baby张"); const [ age, setage ] = useState(18);return ( {setname("baby张" + new Date().getTime()); }}>改名字 {setage("年龄" + new Date().getTime());}}>改年龄UseMemo {name}：{age}
{name}的children );};export default UseMemo;4.useRef
ref跟之前差不多，useRef创建–绑定–使用，三步走，详细看代码以及备注
import React, { useState, useRef } from "react";const UseRef = () => {//这里useState绑定个input,关联一个状态nameconst [ name, setname ] = useState("baby张");const refvalue = useRef(null);// 先创建一个空的useReffunction addRef() {refvalue.current.value = name; //点击按钮时候给这个ref赋值// refvalue.current = name //这样写时，即使ref没有绑定在dom上，值依然会存在创建的ref上，并且可以使用它console.log(refvalue.current.value);}return ( {setname(e.target.value); }}/>给我个UseRef名字：
);};export default UseRef;5.useContext
之前使用过context的小伙伴一看就懂，useContext的话跟之前的context基本用法差不多，代码内有详细注释说明，创建，传值，使用
import React, { useState, useContext, createContext } from "react";const ContextName = createContext();//这里为了方便写博客，爷爷孙子组件都写在一个文件里，正常需要在爷爷组件和孙子组件挨个引入创建的Contextconst UseContext = () => {//这里useState创建一个状态，并按钮控制变化const [ name, setname ] = useState("baby张");return (UseContext 爷爷
{setname("baby张" + new Date().getTime());}}>改变名字{/**这里跟context用法一样，需要provider向子组件传递value值，value不一定是一个参数 */}}{/**需要用到变量的子组件一定要写在provider中间，才能实现共享 */} );};const Child = () => {//创建一个儿子组件，里面引入孙子组件return (Child 儿子{childname.name}:{childname.age}
);};export default UseContext;6.useReducer
这里的usereducer会返回state和dispatch,通过context传递到子组件，然后直接调用state或者触发reducer，我们常用useReducer 与useContext createContext一起用，模拟reudx的传值和重新赋值操作。
import React, { useState, useReducer, useContext, createContext } from "react";//初始化stroe的类型、初始化值、创建reducerconst ADD_COUNTER = "ADD_COUNTER";const initReducer = {count: 0};//正常的reducer编写function reducer(state, action) {switch (action.type) {case ADD_COUNTER:return { ...state, count: state.count + 1 };default:return state;}}const CountContext = createContext();//上面这一段，初始化state和reducer创建context,可以单独写一个文件，这里为了方便理解，放一个文件里写了const UseReducer = () => {const [ name, setname ] = useState("baby张");//父组件里使用useReducer,第一个参数是reducer函数，第二个参数是state，返回的是state和dispashconst [ state, dispatch ] = useReducer(reducer, initReducer);return (UseReducer{/* 在这里通过context，讲reducer和state传递给子组件*/}{name}今年{state.count}岁
);};export default UseReducer;【相关推荐：Redis视频教程】
以上就是react hook有哪些的详细内容，更多请关注php中文网其它相关文章！
