在React 的世界中，有容器组件和UI组件之分，在React Hooks出现之前，UI组件我们可以使用函数，无状态组件来展示UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给UI组件进行渲染。在我看来，使用React Hooks相比于从前的类组件有以下几点好处:
1．代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过React Hooks可以将功能代码聚合，方便阅读维护
2．组件树层级变浅，在原本的代码中，我们经常使用HOC/render props等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在React Hooks中，这些功能都可以通过强大的自定义的Hooks来实现
React 在v16.8的版本中推出了React Hooks新特性，虽然社区还没有最佳实践如何基于React Hooks来打造复杂应用(至少我还没有)，凭借着阅读社区中大量的关于这方面的文章，下面我将通过十个案例来帮助你认识理解并可以熟练运用React Hooks大部分特性。
1、useState保存组件状态
在类组件中，我们使用this.state来保存组件状态，并对其修改触发组件重新渲染。比如下面这个简单的计数器组件，很好诠释了类组件如何运行:
function UseState(props) {
let [count, setCount] = useState(0)
function hideClick() {
setCount(() => {
return count + 1
})
}
return (
<div>
<span>{count}</span>
<button onClick={hideClick}>++</button>
</div>
)
}
export default UseState
通过传入useState参数后返回一个带有默认状态和改变状态函数的数组。通过传入新状态给函数来改变原本的状态值。值得注意的是useState不帮助你处理状态，相较于setState非覆盖式更新状态，useState覆盖式更新状态，需要开发者自己处理逻辑。(代码如上)
似乎有个useState后，函数组件也可以拥有自己的状态了，但仅仅是这样完全不够。
2、useEffect处理副作用
函数组件能保存状态，但是对于异步请求，副作用的操作还是无能为力，所以React提供了useEffect 来帮助开发者处理函数组件的副作用，在介绍新API之前，我们先来看看类组件是怎么做的:
import React from 'react'
import { useState, useEffect } from 'react'
export default function (props) {
let [data, setData] = useState({ count: 0 })
useEffect(() => {
console.log('effect')
}, [data])
//[] 空数组不依赖任何值，只执行一次
useEffect(() => {
return () => {
console.log('unmount')
}
}, [])
return (
<div>
<div>{data.count}</div>
<button onClick={() => setData(data => ({ count: data.count + 1 }))}>click</button>
</div>
)
}
3、UseContext减少组件层级
通过React Context的语法，在App组件中可以跨过Foo组件给Bar组件传递数据，而在React Hookes中，我们可以使用useContext进行改造。
import React, { createContext, useContext } from 'react'
let nameContext = createContext({ name: 'zhangsan' })
let ageContext = createContext({ age: 12 })
export default function UseContext() {
let name = useContext(nameContext)
let age = useContext(ageContext)
return (
<div>
{name.name} {age.age}
</div>
)
}
4、useReducer
useReducer这个Hooks在使用上几乎跟Redux、React-Redux几乎一样，唯一缺少的就是无法使用redux提供的中间件。
import React, { useReducer } from 'react'
const initState = {
count: 0
}
const reducer = (state, action) => {
switch (action.type) {
case 'add':
return {
count: state.count + 1
}
case 'minus':
return {
count: state.count - 1
}
default:
return state
}
}
export default function UseReducer() {
let [state, dispatch] = useReducer(reducer, initState);
return (
<div>
<button onClick={() => dispatch({ type: 'minus' })}>-</button>
<span>{state.count}</span>
<button onClick={() => dispatch({ type: 'add' })}>+</button>
</div>
)
}
5、useCallback 记忆函数
一版把函数式组件理解为class组件render函数的语法糖，所以每次重新渲染的时候，函数式组件内部所有的代码都会重新执行一遍。所以上述代码中每次render， handleClick都会是一个新的引用，所以也就是说传递给SomeComponent组件的props.onClick一直在变(因为每次都是一个新的引用)，所以才会说这种情况下，函数组件在每次渲染的时候如果有传递函数的话都会重渲染子组件。
而有了useCallback 就不一样了，你可以通过useCallback 获得一个记忆后的函数。
function(){
const memoizedHandleClicj = useCallback(()=>{
console.log('Click happend')
},[]); //空数组代表无论什么情况下该函数都不会发生改变
return <SomeComponent onclick={memoizedHandleclick}>click Me</SomeComponent>;
}
第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCalback就会重新返回一个新的函数提供给后面进行渲染。
这样质押子组件继承了PureComent或者使用Reac.memo就可以有效避免不必要的VDOM渲染。
import React, { useState, useCallback, memo } from 'react'
const Child = memo(function (props) {
console.log('Child run....')
return (
<>
<h1>Hello</h1>
<button onClick={props.onAdd}>add</button>
</>
)
}, () => {
//true false自己定义是否缓存
return true
})
export default function UseCallback() {
console.log('UseCallback run....')
let [count, setCount] = useState(0)
const handleAdd = useCallback(
() => {
console.log('added.')
}, [])
return (
<div>
<div>{count}</div>
<Child onAdd={handleAdd}></Child>
<button onClick={() => { setCount(100) }}>change count</button>
</div>
)
}
6、useMemo 记忆组件
useCallback的功能完全可以由useMemo所取代，如果你想通过使用useMemo返回一个记忆函数也是完全可以的。
usecallback(fn，inputs) is equivalent to useMemo( ( ) => fn，inputs ).
所以前面使用useCallback 的例子可以使用useMemo进行改写:
function App(){
const memoHandleClick = useMeno(()=> ()=>{
console.log('click')
},[]) //空数组代表无论什么情况下该函数都不会发生改变
return <SomeComponent onclick={memoHandleClick}>Click me<SomeComponent/>
}
唯一的区别是: useCallback 不会执行第一个参数函数，而是将它返回给你，而useMemo会执行第一个函数并且将函数执行结果返回给你。所以在前面的例子中，可以返回handleClick 来达到存储函数的目的。
所以useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而useMemo更适合经过函数计算得到一个确定的值，比如记忆组件。
import React, { useState, useMemo, memo } from 'react';
const ChildHood = function (props) {
return (
<div>Chind Hood</div>
)
}
const Child = memo(function ({ a, b, onAdd }) {
console.log('Child run....')
const Child1 = useMemo(() => () => <ChildHood a={a}></ChildHood>, [a])
const Child2 = useMemo(() => () => <ChildHood b={b}></ChildHood>, [b])
return (
<>
<h1>Hello</h1>
<button onClick={onAdd}>add</button>
<Child1></Child1>
<Child2></Child2>
</>
)
})
7、useRef保存引用值
import React, { createRef, useRef } from 'react'
export default function UseRef() {
// const btn = createRef();
const btn = useRef();
function handleClick() {
console.log(btn)
}
return (
<div>
<button ref={btn} onClick={handleClick}>click</button>
</div>
)
}
export default function App() {
const count = useRef(0)
const handleClick = (num) => {
count.current += num
setTimeout(() => {
console.log("count: " + count.current);
}, 3000)
}
return (
<div>
<p>You clicked {count.current} times</p>
<button onClick={() => handleClick(1)}>增加 count</button>
<button onClick={() => handleClick(-1)}>减少 count</button>
</div>
);
}
8、useImperativeHandle
import React, { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
function ChildInputComponent(props, ref) {
const inputRef = useRef(null);
useImperativeHandle(ref, () => inputRef.current);
return <input type="text" name="child input" ref={inputRef} />;
}
//forwardRef 高阶组件 ref传到下个组件
const ChildInput = forwardRef(ChildInputComponent);
function App() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return (
<div>
<ChildInput ref={inputRef} />
</div>
);
}
export default App
通过这种方式，App组件可以获得子组件的input的DOM节点。
9、useLayoutEffect同步执行副作用
大部门情况下，使用useEffect就可以处理组件的副作用
10、useEffect和useLayoutEffect有什么区别?
简单来说就是调用时机不同，useLayoutEffect和原来componentDidMount & componentDidupdate一致，在react完成DOM更新后马上同步**调用的代码，会阻塞页面渲染。而'useEffect是会在整个页面渲染完才会调用的代码。
在实际使用时如果想避免页面抖动（在useEffect里修改DOM很有可能出现)的话，可以把需要操作DOM的代码放在useLayoutEffect里。关于使用useEffect导致页面抖动。
不过useLayoutEffect在服务端渲染时会出现一个warning，要消除的话得用useBffect代替或者推迟渲染时机。
扫一扫
2547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
