Hooks的出现,想必大家有所了解。如果你是一个Hooks新手,想用Hooks去构造你的应用程序。不要心急,你只需要跟着我一起学习hooks,半个小时你就能掌握React Hooks,并用Hooks去重构你的项目
- 首先我们要了解Hooks的API
- 吃透常用的四种API
- 自定义Hooks
- 比较好用的Hooks库
- 其他的API和有价值的文档
首先我们要了解Hooks的API
- 基础API
- useState
- useEffect
- useContext
- 其他的API
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeMethods
- useLayoutEffect
吃透常用的四种
- useState
- useEffect
- useCallback
- useRef
useState
const [state, setState] = useState(initialState);
在初始渲染的时候,返回的状态( state )与作为第一个参数( initialState )传递的值相同。
setState 函数用于更新 state(状态) 。它接受一个新的 state(状态) 值,并将组件排入重新渲染的队列。
useEffect
const id = props;
const [value, setValue] = useState(1)
useEffect(() => {
dosomething();
},[id, value]);
useEffect 这个副作用函数在react全生命周期中扮演着很重要的角色,与 componentDidMount 和 componentDidUpdate 不同,传递给 useEffect 的函数在延迟事件期间在 layout(布局) 和 paint(绘制) 后触发。我们也可以把useEffect看作是生命周期函数的一个集合,之前在生命周期中didMount,didUpdate,WillReceiveProps,WillUnmount都可以将函数作为第一个参数dosomething在useEffect执行。
第一个参数为函数dosomething(),第二个参数为一个数组,数组里面的id和value只要有一个改变都会执行dosomething()。
useCallback
useEffect(() => {
getDeviceSituation(projectId);
}, [getDeviceSituation, projectId]);
const getDeviceSituation = useCallback((id) => {
dispatch({
type: 'runTimeCenter/getDeviceSituation',
payload: {
projectId: id,
},
});
}, [dispatch]);
const onClickTag = () => {
getDeviceSituation(projectId);
};
return (
<div onclick = {onClickTag}></div>
)
- useEffect里面要执行外部封装的方法时,外部封装的方法必需要用useCallback包裹一层,第二个参数为对该状态值的监听。
- useCallback返回的是一个函数,该函数中有对状态值的监听,实际上可以理解成一个有函数返回值的useEffect。
useRef
两种用途
- DOM操作(与render props 用法类似),useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数(initialValue)。返回的对象将存留在整个组件的生命周期中。
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
2.实例化字段,方便保留任何可变值
const string = useRef('aaa');
自定义Hooks
function useInputValue(initialValue) {
const [value, setValue] = useState(initialValue);
const onChange = (event) => {
setValue(event.currentTarget.value);
};
return {
value,
onChange
};
}
function Demo(props){
const name = useInputValue('sss')
return (
<input {...name} />
)
}
是不是感觉代码很清爽,这样我就可以将所有的组件Hooks化,说白了自定义Hooks,也就是自定义组件。
比较好用的Hooks库
- ESlint插件 react-hooks 规则
- react 自定义hooks库
- react native 自定义hooks组件库