1. 首页
  2. Reactjs

React hook 10种 Hook (详细介绍及使用)

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 还提供了一种更强大的方式来组合他们。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文手册
专注分享前端知识,你想要的,在这里都能找到


如果对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

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

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( <header className="App-header"> {hook} <button onClick={this.changehook}> 改变hook </button> </header> ) } } export {App} //函数式写法,改变状态 function App() { //创建了一个叫hook的变量,sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’ const [hook, sethook] = useState("react hook 是真的好用啊"); return ( <header className="App-header"> {hook}{/**这里的变量和方法也是可以直接使用的 */} <button onClick={() => sethook("我改变了react hook 的值")}> 改变hook </button> </header> ); } export {App} //箭头函数的函数写法,改变状态 export const App = props => { const [hook, sethook] = useState("react hook 是真的好用啊"); return ( <header className="App-header"> {hook} <button onClick={() => sethook("我改变了react hook 的值")}> 改变hook </button> </header> ); };

\==使用方法备注在上面的demo中== 看完上面useState的对比使用,一个小的demo结构更清晰,代码更简洁,更像写js代码,运用到项目中,那岂不是美滋滋。


2.useEffect & useLayoutEffect

useEffect代替原来的生命周期,componentDidMount,componentDidUpdate 和 componentWillUnmount 的合并版 useEffect( ()=>{ return ()=>{ } } , [ ])

  • 第一个参数,是函数,默认第一次渲染和更新时都会触发,默认自带一个return ,return一个函数表示可以再销毁之前可以处理些事情
  • 第二个参数,数组【】,空的时候表示只执行一次,更新时不触发,里面的参数是什么,当参数变化时才会执行useEffect ==useEffect==可以多次使用,按照先后顺序执行 ==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 ( <header className="UseEffect-header"> <h3>UseEffect</h3> <Child hook={hook} name={name} /> {/**上面的变量和下面方法也是可以直接使用的 */} <button onClick={() => sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook</button> </header> ); }; const Child = (props) => { const [ newhook, setnewhook ] = useState(props.hook); //这样写可以代替以前的componentDidMount,第二个参数为空数组,表示该useEffect只执行一次 useEffect(() => { console.log('first componentDidMount'); }, []); //第二个参数,数组里是hook,当hook变化时,useEffect会触发,当hook变化时,先销毁再执行第一个函数。 useEffect( () => { setnewhook(props.hook + '222222222'); console.log('useEffect'); return () => { console.log('componentWillUnmount '); }; }, [ props.hook ] ); //useLayoutEffect 强制useeffect的执行为同步,并且先执行useLayoutEffect内部的函数 useLayoutEffect( () => { console.log('useLayoutEffect'); return () => { console.log('useLayoutEffect componentWillUnmount'); }; }, [ props.hook ] ); return ( <div> <p>{props.name}</p> {newhook} </div> ); }; 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 ( <div style={{ border: '1px solid' }}> <p>children:{children}</p> <p>name:{name}</p> <p>changed:{changedname}</p> <p>age:{age}</p> </div> ); }; const UseMemo = () => { //useState 设置名字和年龄,并用2两个按钮改变他们,传给Child组件 const [ name, setname ] = useState('baby张'); const [ age, setage ] = useState(18); return ( <div> <button onClick={() => { setname('baby张' + new Date().getTime()); }} > 改名字 </button> <button onClick={() => { setage('年龄' + new Date().getTime()); }} > 改年龄 </button> <p> UseMemo {name}:{age} </p> <Child age={age} name={name}> {name}的children </Child> </div> ); }; export default UseMemo;

4.useRef

ref跟之前差不多,useRef创建–绑定–使用,三步走,详细看代码以及备注


import React, { useState, useRef } from 'react'; const UseRef = () => { //这里useState绑定个input,关联一个状态name const [ name, setname ] = useState('baby张'); const refvalue = useRef(null);// 先创建一个空的useRef function addRef() { refvalue.current.value = name; //点击按钮时候给这个ref赋值 // refvalue.current = name //这样写时,即使ref没有绑定在dom上,值依然会存在创建的ref上,并且可以使用它 console.log(refvalue.current.value); } return ( <div> <input defaultValue={name} onChange={(e) => { setname(e.target.value); }} /> <button onClick={addRef}>给下面插入名字</button> <p>给我个UseRef名字:</p> <input ref={refvalue} /> </div> ); }; export default UseRef;

5.useContext

之前使用过context的小伙伴一看就懂,useContext的话跟之前的context基本用法差不多,代码内有详细注释说明,创建,传值,使用


import React, { useState, useContext, createContext } from 'react'; const ContextName = createContext(); //这里为了方便写博客,爷爷孙子组件都写在一个文件里,正常需要在爷爷组件和孙子组件挨个引入创建的Context const UseContext = () => { //这里useState创建一个状态,并按钮控制变化 const [ name, setname ] = useState('baby张'); return ( <div> <h3>UseContext 爷爷</h3> <button onClick={() => { setname('baby张' + new Date().getTime()); }} > 改变名字 </button> {/**这里跟context用法一样,需要provider向子组件传递value值,value不一定是一个参数 */}} <ContextName.Provider value={{ name: name, age: 18 }}> {/**需要用到变量的子组件一定要写在provider中间,才能实现共享 */} <Child /> </ContextName.Provider> </div> ); }; const Child = () => { //创建一个儿子组件,里面引入孙子组件 return ( <div style={{ border: '1px solid' }}> Child 儿子 <ChildChild /> </div> ); }; const ChildChild = () => { //创建孙子组件,接受爷爷组件的状态,用useContext,获取到爷爷组件创建的ContextName的value值 let childname = useContext(ContextName); return ( <div style={{ border: '1px solid' }}> ChildChild 孙子 <p> {childname.name}:{childname.age} </p> </div> ); }; export default UseContext;

6.useReducer

这里的usereducer会返回state和dispatch,通过context传递到子组件,然后直接调用state或者触发reducer,我们常用useReducer 与useContext createContext一起用,模拟reudx的传值和重新赋值操作。


import React, { useState, useReducer, useContext, createContext } from 'react'; //初始化stroe的类型、初始化值、创建reducer const 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和dispash const [ state, dispatch ] = useReducer(reducer, initReducer); return ( <div> UseReducer {/* 在这里通过context,讲reducer和state传递给子组件*/} <CountContext.Provider value={{ state, dispatch, name, setname }}> <Child /> </CountContext.Provider> </div> ); }; const Child = () => { //跟正常的接受context一样,接受父组件的值,通过事件等方式触发reducer,实现redux效果 const { state, dispatch, name, setname } = useContext(CountContext); function handleclick(count) { dispatch({ type: ADD_COUNTER, count: 17 }); setname(count % 2 == 0 ? 'babybrother' : 'baby张'); } return ( <div> <p> {name}今年{state.count}岁 </p> <button onClick={() => handleclick(state.count)}>长大了</button> </div> ); }; export default UseReducer;

加班加点到这里就算整理完react hook了,github的例子也写好了,感谢支持,有出处的欢迎指正。

Github demo 地址, 博客地址

附上github地址 10个hook demo 点一点star,谢谢咯!

作者:@baby张
链接:https://juejin.im/post/5dc421c4e51d45381b281ccf

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:React hook 10种 Hook (详细介绍及使用)

链接:https://www.javascriptc.com/3785.html

« 打造工业级推荐系统(十):如何构建可解释的推荐系统
这份Webpack优化总会让你不得不爱,而且还爱的不能自拔»
Flutter 中文教程资源

相关推荐

QR code