网站建设合同标准范本,违规网站备案,一家网站建设公司需要什么资质,网络营销的含义有哪些React Hook是什么#xff1f;
React官网是这么介绍的#xff1a; Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
完全可选的 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想#xff0c;你不…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 概念提供了更直接的 APIprops statecontextrefs 以及生命周期。稍后我们将看到Hook 还提供了一种更强大的方式来组合他们。
如果对react还不够了解建议先看下react官方文档写写demo再来看文章因为有的react基础的东西我就一笔带过不细说。 react 官方文档 https://zh-hans.reactjs.org/docs/hooks-state.html
React目前提供的Hook
hook 用途
useState 设置和改变state代替原来的state和setState
useEffect 代替原来的生命周期componentDidMountcomponentDidUpdate 和 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.statereturn(header classNameApp-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 classNameApp-header{hook}{/**这里的变量和方法也是可以直接使用的 */}button onClick{() sethook(我改变了react hook 的值)}改变hook/button/header);
}
export {App}//箭头函数的函数写法,改变状态
export const App props {const [hook, sethook] useState(react hook 是真的好用啊);return (header classNameApp-header{hook}button onClick{() sethook(我改变了react hook 的值)}改变hook/button/header);
};使用方法备注在上面的demo中 看完上面useState的对比使用一个小的demo结构更清晰代码更简洁更像写js代码运用到项目中那岂不是美滋滋。
2.useEffect useLayoutEffect
useEffect代替原来的生命周期componentDidMountcomponentDidUpdate 和 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 classNameUseEffect-headerh3UseEffect/h3Child 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 (divp{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 }}pchildren{children}/ppname{name}/ppchanged{changedname}/ppage{age}/p/div);
};const UseMemo () {//useState 设置名字和年龄并用2两个按钮改变他们传给Child组件const [ name, setname ] useState(baby张); const [ age, setage ] useState(18);return (divbuttononClick{() {setname(baby张 new Date().getTime()); }}改名字/buttonbuttononClick{() {setage(年龄 new Date().getTime());}}改年龄/buttonpUseMemo {name}{age}/pChild 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,关联一个状态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 (divinputdefaultValue{name}onChange{(e) {setname(e.target.value);}}/button onClick{addRef}给下面插入名字/buttonp给我个UseRef名字/pinput ref{refvalue} //div);
};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 (divh3UseContext 爷爷/h3buttononClick{() {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和dispashconst [ state, dispatch ] useReducer(reducer, initReducer);return (divUseReducer{/* 在这里通过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 (divp{name}今年{state.count}岁/pbutton onClick{() handleclick(state.count)}长大了/button/div);
};export default UseReducer;
