Hooks 定义
Hook 就是钩子的意思。为了在函数组件中使用类组件的生命周期、状态管理等一些类组件特性，所以引入了 hooks.
需要注意的是：在类组件中是不能够使用hooks的。
Hooks 使用规则
- Hooks只能在顶层调用，不能在循环、条件判断或者嵌套函数中调用hook函数。
// 错误写法
if(a===b){
useEffect(()=>{
//...
},[...])
}
- 只能在函数组件中使用hooks，不能在类组件中使用
- 可以使用 eslint-plugin-react-hooks插件规范hooks代码
Hooks 优缺点
优点
- 代码容易复用(可以自定义useState)
- 代码可读性强。代码好看些，每个功能都在函数中代码量少
- 组件层级变少
- 不需要考虑this 的指向问题
缺点
- 响应式的 useEflect , useCalbask 的作用、第二个参数(依赖项数组)的改变时机不容易把握。
- 状态不同步,不在同一个 ui 线程,同一个变量,会显示不同的值。可以使用 useRef 改善。
- 状态管理容易出错
- 需要了解所有 hooks 函数
函数列表
useState
- 用来声明状态变量，类似类组件class 中的this.setState({a:'abc'})。而且函数的渲染每次都是独立的(异步)，这也就是 Capture Value 特性
- 示例
// 定义
const [nameState, setName] = useState("");// useState 的参数为设定的默认值
const [age, setAge] = useState(1);
// 使用
setName("ABC");
setAge(25);
- 坑
- 点击按钮改变nameState值，当回车 Enter（或者不在同一个线程中，初始时注册的方法等）提交时，获取 nameState 值，这时发现nameState还是默认的初始值。例如：点击按钮提交和按回车键提交，点击按钮提交是可以获取到值的，按回车键提交获取值失败。
- 解决方法：
- 方法一
const [nameState，setName]=useState();
const lastNameState = useRef(nameState);
// 改变 lastNameState 值
useEffect(()=>{
lastNameState.current= nameState;
}[nameState]);
// 点击按钮时，调用setName
const onClick=(e)=>{
setName(e.currentTarget.value)
}
- 方法二
useEffect(()=>{
setName(name)
}，[name]);
//点击按钮时，发送一个action，改变reducer 的state值
const onClick=(e)=>{
putName(e.currentTarget.value)
}
//...
// Action
export function putName(name){
return{
type:"CHANGE_NAME",
payload: { name }
}
}
useEffect
- 网上都叫其副作用，我也不明白为啥都叫副作用 ♂️，我更倾向于叫响应。
- 其替代类组件声明周期函数： componentDidMount、componentWillUnmount、componentDidUpdate。
- 示例
// componentDidMount || componentWillUnmount
useEffect(()=>{
// componentDidMount
// ...
// componentWillUnmount
return ()=>{
//...
}，[]);
// componentDidMount || componentDidUpdate
useEffect(()=>
setName(name)
)，[name]);// 从父组件传递过来的name，当name 发生变化时，更新nameState
useContext
- 用来处理多层级传递数据，减少组件的嵌套。
- 示例
function Children(){
const color = useContext(colorContext);
return <div>{color}</div>
}
function Parent(){
return <Children/>
}
const colorContext = createContext("gray");// React.createContext();
function App(){
return (
<colorContext.Provider value={"red"}>
<Parent/>
</colorContext.Provider>
)
}
useReducer
- 可以看成是react-redux 使用方式的缩小版。不能使用redux 提供的中间件。
- 可以看成是useState 的替代方案
- useReducer(reducer, initialState, init())。reducer函数，接收state和action; initialState是需要设定的state的初始值;init()是通过方法来初始化state，这样可以情性的创建初始state。
- 示例
const initialState =0;
const init = (v) =>{
return v;
}
const testReducer =(state, action)=>{
switch(action){
case "add":
return state+1;
case"sub":
return state-1;
case "reset":
return init(action.payload);
default:
return state;
}
}
const[count, calculationDispatch]= useReducer(testReducer, initialState);
// const[count, calculationDispatch] = useReducer(testReducer, initialState, init);
return(
<div>
<div>{count}</div>
<button onClick={()=>calculationDispatch("add")}>ADD</button>
<button oClick={()=>calculationDispatch("sub")}>SUB</button>
<button oClick={()=>calculationDispatch({type: "reset",payload:initialState})}>RESET</button>
</div>
)
useCallback
- 获得一个记忆函数，避免在某些情况下子组件的重复渲染。一般用来做性能优化。
- useCallback 返回的是一个函数
- useCallback(function,[...])。两个参数，第一个参数是需要记忆的画数，第二个参数是当数组内的值发生变化了，才执行function。
- 示例
const [text, setText] = useState("");
const submit = useCallback(()=>{
console.log(text)
}, [text]);
return(
<div>
<input value={text} onChange={(e)=>setText(e.target.value)}/>
<button onClick={submit}>Submit</button>
</div>
)
useMemo
- 获得一个记忆组件，适用于返回确定的值
- 类似useCallback，但是useCallback返回的是需要执行的函数，而useMemo 返回的是执行函数返回的值
- 示例
const [text, setText] = useState("");
const textMemo = useMemo(()=>{
return text+"time"
}, [text]);
return(
<div>
<input value= {text} onChange={(e)=>setText(e.target.value)}/>
<input value={textMemo}/>
</div>
)
useRef
- 生成对DOM对象的引用。
- 类似于 createRef，但是它是真正的引用，而不是把值copy 过去。
- 与useState很像，可以把它看成是render的全局变量，而useState是每个render中局部变量; useRef.current 不会触发Ul的重新渲染，而useState会触发Ul的重新渲染。
- 示例
const [name, setName] = useState("");
const nameRef = useRef(name);
const submit =() =>{
setName(nameRef.current);
}
return(
<div>
<p>{name}</p>
<div>
<input ref ={nameRef}/>
<button onClick={submit}>Submit</button>
</div>
</div>
)
useImperativeHandle
- 穿透Ref，用于父组件获取子组件的引用
- 示例
function ChildInputComponent(props, ref){
const inputRef = useRef(null);
useImperativeHandle(re, ()=>inputRef.current);
return(
<div>
<input name="input1" ref={inputRef} placeholder="yes"/>
<input name="input1" placeholder="nonono"/>
</div>
)
}
const ChildInput = forwardRef(ChildInputComponent);
function App(){
const inputRef = useRef(null);
useEffect(()=>{
inputRef.current.focus()
},[]);
return(
<div>
<ChildInput ref={inputRef}/>
</div>
)
}
useLayoutEffect
- 同步执行，在页面完全渲染完成后，操作 dom， 会优于 useEffect 异步触发函数。
其他
memo
- 用来包裹函数式组件的
- 当用React.memo包裹组件时，当组件内的useState或useContext 发生变化时，才会重新渲染面面。
- memo(Component, propsAreEqual(preProps, nextProps));第一个参数为函数组件，第二个参数为比较规则，若不传递则默认为props 浅比较。
forwardRef
- 主要用来进行DOM 穿透的
- 示例
const AButton = React.forwardRef((props, ref)=>(
<button ref={ref} {...props}>
{props.children}</button>
))
class BButton extends React.Component{
this.testRef = React.createRef();
onClick =()=>{
// 打印出 AButton 中button 的信息
console.log(this.testRef.current)
};
render(){
return(
<div>
<AButton ref = {this.testRef} onClick={onClick}>AButtan</AButton>
</div>
)
}
}
总结
这里只罗列了hooks 函数的基本用法，想要更深层次的掌握react 的知识，需要不断的去实践。只有在不断的使用各种技巧、各种功能，才会越发的了解掌握更深入的内容。
