React hooks面试考察的知识点有哪些
这篇文章主要介绍了React hooks面试考察的知识点有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇React hooks面试考察的知识点有哪些文章都会有所收获，下面我们一起来看看吧。
什么是hooks？解决了什么问题？
Hooks 是react16.8新增特性，它可以使用一些state的新特性，简化逻辑复用，副作用统一数据。
Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或者事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。
Hook 简介
Hook出世之前React存在的问题
在组件之间复用状态逻辑很难
React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。
复杂组件变得难以理解
组件常常在
和componentDidMount
中获取数据。但是，同一个componentDidUpdate
中可能也包含很多其它的逻辑，如设置事件监听，而之后需在componentDidMount
中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。componentWillUnmount难以理解的 class
class 是学习 React 的一大屏障。你必须去理解 JavaScript 中
的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。大家可以很好地理解 props，state 和自顶向下的数据流，但对 class 却一筹莫展。this
Hook带来的解决方案
你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。
Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
Hook 使你在非 class 的情况下可以使用更多的 React 特性。 从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。
Hook API
useState
useStateuseState[0][1]初始化
//返回一个 state，以及更新 state 的函数 setState(接收一个新的 state 值并将组件的一次重新渲染加入队列)
const [state, setState] = useState(initialState);函数式更新
//如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}惰性初始 state
//如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});跳过 state 更新
调用 State Hook 的更新函数并传入当前的 state 时，React 将跳过子组件的渲染及 effect 的执行。（React 使用
Object.isuseEffect
我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如
componentDidMountcomponentDidUpdatecomponentWillUnmount简单例子
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 类似于componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 更新文档的标题
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button>
</div>
);
}清除 effect
通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，
useEffectuseEffect(() => {
const subscription = props.source.subscribe();
return () => {
// 清除订阅
subscription.unsubscribe();
};
});为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除。
effect 的执行时机
与
componentDidMountcomponentDidUpdateuseEffecteffect 的条件执行
默认情况下，effect 会在每轮组件渲染完成后执行。这样的话，一旦 effect 的依赖发生变化，它就会被重新创建。在某些情况下，我们不需要在每次组件更新时都创建新的订阅，而是仅需要在
sourceuseEffect//此时，只有当 props.source 改变后才会重新创建订阅。(要实现componentDidMount功能只需要设置第二个参数为[]即可)
useEffect(
() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source],
);useContext
可以深层组件传值，父组件传给子孙组件。接收一个 context 对象（
React.createContext<MyContext.Provider>value当组件上层最近的
<MyContext.Provider>MyContextvalueReact.memoshouldComponentUpdateuseContextconst themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
}
};
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context! </button>
);
}useReducer
useState(state, action) => newStatedispatch指定初始 state
有两种不同初始化
useReduceruseReducer//nst [state, dispatch] = useReducer(reducer, initialArg, init);
const [state, dispatch] = useReducer(
reducer,
{count: initialCount}
);某些场景下，
useReduceruseStateuseReducerdispatchconst initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count} <button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}惰性初始化
你可以选择惰性地创建初始 state。为此，需要将
inituseReducerinit(initialArg)这么做可以将用于计算 state 的逻辑提取到 reducer 外部，这也为将来对重置 state 的 action 做处理提供了便利：
function init(initialCount) {
return {count: initialCount};
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
case 'reset':
return init(action.payload);
default:
throw new Error();
}
}
function Counter({initialCount}) {
const [state, dispatch] = useReducer(reducer, initialCount, init);
return (
<>
Count: {state.count} <button
onClick={() => dispatch({type: 'reset', payload: initialCount})}> Reset </button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}跳过 dispatch
如果 Reducer Hook 的返回值与当前 state 相同，React 将跳过子组件的渲染及副作用的执行。（React 使用
Object.isuseMemo
把“创建”函数和依赖项数组作为参数传入
useMemouseMemomemo你可以把
useMemouseMemouseMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);useCallback
把内联回调函数及依赖项数组作为参数传入
useCallbackshouldComponentUpdateuseMemouseCallbackuseCallback(fn, deps)useMemo(() => fn, deps)const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);useRef
useRef.currentinitialValueuseEffectuseRefuseRef本质上，
useRef.current<div ref={myRef} />.currentuseRef()ref请记住，当 ref 对象内容发生变化时，
useRef.currentconst Hook =()=>{
const [count, setCount] = useState(0)
const btnRef = useRef(null)
useEffect(() => {
console.log('use effect...')
const onClick = ()=>{
setCount(count+1)
}
btnRef.current.addEventListener('click',onClick, false)
return ()=> btnRef.current.removeEventListener('click',onClick, false)
},[count])
return(
<div>
<div>
{count} </div>
<button ref={btnRef}>click me </button>
</div>
)
}useImperativeHandle
useImperativeHandle(ref, createHandle, [deps])useImperativeHandlerefuseImperativeHandleforwardReffunction FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);在本例中，渲染
<FancyInput ref={inputRef} />inputRef.current.focus()自定义 Hook
自定义 Hook 是一个函数，其名称以 “
use例如，下面的
useFriendStatusimport { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}自定义一个当resize 的时候 监听window的width和height的hook
import {useEffect, useState} from "react";
export const useWindowSize = () => {
const [width, setWidth] = useState()
const [height, setHeight] = useState()
useEffect(() => {
const {clientWidth, clientHeight} = document.documentElement
setWidth(clientWidth)
setHeight(clientHeight)
}, [])
useEffect(() => {
const handleWindowSize = () =>{
const {clientWidth, clientHeight} = document.documentElement
setWidth(clientWidth)
setHeight(clientHeight)
};
window.addEventListener('resize', handleWindowSize, false)
return () => {
window.removeEventListener('resize',handleWindowSize, false)
}
})
return [width, height]
}使用：
const [width, height] = useWindowSize()
const isOnline = useFriendStatus(id);相关文章