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目前提供的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(
<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>
);
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
可以用来优化子组件的渲染问题,或者监听子组件状态变化来处理事件,这一点在以前是很难做到的,因为shouldComponentUpdate 里能监听到是否变化,但没法控制其他的外部方法,只能返回true和false,而componentDidUpdate只能在更新后执行,所以想在渲染之前做些事情就不好搞了。
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';
}
//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.useCallback
简单来说就是返回一个函数,只有在依赖项发生变化的时候才会更新(返回一个新的函数)。
// 父组件,给子组件传递name和changeName方法
const Parent = () => {
const [count, setCount] = useState(1);
const [name, setName] = useState("bbz");
const addCount = () => {
setCount(count + 1);
};
const changeName = useCallback((n) => {
setName(n);
}, []);
return (
<>
<div onClick={addCount}>计数: {count}</div>
<Child name={name} changeName={changeName} />
</>
);
};
// 子组件
const Child = ({ name, changeName }) => {
console.log("child start---");
return (
<div
onClick={() => {
changeName("bobozai");
}}
>
child comps: {name}
</div>
);
};
// 如果不使用useCallback,则点击父组件计数的同时,子组件会console进行渲染,
// 因为更新count时父组件会重新渲染,导致重新生成了一个changeName函数,
// 所以子组件的props变了,导致子组件会重新渲染
// 而对changeName函数用useCallback进行包裹,则对函数进行缓存不会重新生成
在线代码: Code Sandbox
import React, { useState, useCallback } from 'react';
import Button from './Button';
export default function App() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
const [count3, setCount3] = useState(0);
const handleClickButton1 = () => {
setCount1(count1 + 1);
};
const handleClickButton2 = useCallback(() => {
setCount2(count2 + 1);
}, [count2]);
return (
<div>
<div>
<Button onClickButton={handleClickButton1}>Button1</Button>
</div>
<div>
<Button onClickButton={handleClickButton2}>Button2</Button>
</div>
<div>
<Button
onClickButton={() => {
setCount3(count3 + 1);
}}
>
Button3
</Button>
</div>
</div>
);
}
// Button.jsx
import React from 'react';
const Button = ({ onClickButton, children }) => {
return (
<>
<button onClick={onClickButton}>{children}</button>
<span>{Math.random()}</span>
</>
);
};
export default React.memo(Button);
在案例中可以分别点击Demo中的几个按钮来查看效果:
- 点击 Button1 的时候只会更新 Button1 和 Button3 后面的内容;
- 点击 Button2 会将三个按钮后的内容都更新;
- 点击 Button3 的也是只更新 Button1 和 Button3 后面的内容。
上述效果仔细理一理就可以发现,只有经过 useCallback
优化后的 Button2 是点击自身时才会变更,其他的两个只要父组件更新后都会变更(这里Button1 和 Button3 其实是一样的,无非就是函数换了个地方写)。下面我们仔细看看具体的优化逻辑。
这里或许会注意到 Button 组件的 React.memo 这个方法,此方法内会对 props 做一个浅层比较,如果如果 props 没有发生改变,则不会重新渲染此组件。
const [count1, setCount1] = useState(0);
// ...
const handleClickButton1 = () => {
setCount1(count1 + 1);
};
// ...
return <Button onClickButton={handleClickButton1}>Button1</Button>
回头再看上面的 Button
组件都需要一个 onClickButton
的 props ,尽管组件内部有用 React.memo
来做优化,但是我们声明的 handleClickButton1
是直接定义了一个方法,这也就导致只要是父组件重新渲染(状态或者props更新)就会导致这里声明出一个新的方法,新的方法和旧的方法尽管长的一样,但是依旧是两个不同的对象,React.memo
对比后发现对象 props 改变,就重新渲染了。
const handleClickButton2 = useCallback(() => {
setCount2(count2 + 1);
}, [count2]);
上述代码我们的方法使用 useCallback 包装了一层,并且后面还传入了一个 [count2]
变量,这里 useCallback 就会根据 count2
是否发生变化,从而决定是否返回一个新的函数,函数内部作用域也随之更新。
由于我们的这个方法只依赖了 count2
这个变量,而且 count2
只在点击 Button2 后才会更新 handleClickButton2
,所以就导致了我们点击 Button1 不重新渲染 Button2 的内容。
5.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;
6.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
7.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;