The Future Depends on You
首页/React/React面试题记录/
React面试题记录
上次更新时间:2021-5-26 文章分类:React 阅读人数:8

React生命周期

1、挂载阶段

constructor:构造函数,在构造函数中初始化 state 对象或者给自定义方法绑定 this
getDerivedStateFromProps:静态方法,当接收到新的属性需要修改state时,可以在getDerivedStateFromProps中修改
render:纯函数,只返回需要渲染的东西,不应该包含其它的业务逻辑
componentDidMount:组件装载之后调用,可以获取到DOM节点并操作,服务器请求、订阅

2、更新阶段

getDerivedStateFromProps: 此方法在更新和挂载阶段都可能会调用
shouldCoomponentUpdate:是否更新组件
render:更新页面渲染
getSnapshotBeforeUpdate:此方法在render之后,componentDidUpdate之前调用,接收两个参数prevProps和prevState。这个函数有一个返回值,会作为第三个参数传给componentDidUpdate
componentDidUpdate:该方法在getSnapshotBeforeUpdate方法之后被调用,有三个参数prevProps,prevState,snapshot,表示之前的props,之前的state,和snapshot

3、卸载阶段

componentWillUnmount:组件被卸载或者销毁之前调用,可以在这个函数中清除定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作

setState是同步还是异步,为什么

React props、state的区别

props:由父组件传递给子组件的参数,props不可修改
state:组件内部定义的状态值,可通过setState更改state的值

React hooks

hook 让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
React 内置 hook API:
useState:返回一个 state,以及更新 state 的函数
useEffect:接收一个包含命令式、且可能有副作用代码的函数
useContext:接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定
useReducer:useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法
useCallback:返回一个 memoized 回调函数
useMemo:返回一个 memoized 值
useRef:useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变
useImperativeHandle:useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下,应当避免使用 ref 这样的命令式代码
useLayoutEffect:其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前,useLayoutEffect 内部的更新计划将被同步刷新
useDebugValue:useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签

hook使用规则:

  1. 只在最顶层使用hook,不要在循环,条件或嵌套函数中调用hook确保总是在 React 函数的最顶层调用 hook。遵守这条规则,就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确
  2. 只在 React 函数中调用 hook,不要在普通的 javascript 函数中调用 hook。你可以在 React 的函数组件中调用 hook、在自定义 hook 中调用其他 hook

React合成事件

class与hook的区别

受控组件和非受控组件

1、受控组件

使 React 的 state 成为“唯一数据源”,在表单元素(如 < input >、 < textarea > 和 < select >),通过 value 和 onChange 改变表单元素的值。在大多数情况下,React 推荐使用受控组件来处理表单数据。在一个受控组件中,表单数据是由 React 组件来管理的。在受控组件中,每一个表单元素都需要编写一个事件处理函数。

<input value={value} onChange={changeValue}/>
<textarea value={value} onChange={changeValue} />
<select value={value} onChange={changeValue}>
  <option>value1</option>
  <option>value2</option>
  <option>value3</option>
  <option>value4</option>
</select>

2、非受控组件

非受控组件的表单数据将交由 DOM 节点来处理。在非受控组件中,不用给每一个表单元素都需要编写一个事件处理函数,可以使用 ref 来从 DOM 节点中获取表单数据。

function App() {
  const inputRef = useRef(null)
  const textRef = useRef(null)
  const selectRef = useRef(null)
  let onSubmit = () => {
    console.log(inputRef.current.value)
    console.log(textRef.current.value)
    console.log(selectRef.current.value)
  }
  return (
    <div className="App">
      <header className="App-header">
        <input ref={inputRef}/>
        <textarea ref={textRef} />
        <select ref={selectRef}>
          <option>value1</option>
          <option>value2</option>
          <option>value3</option>
          <option>value4</option>
        </select>
        <button onClick={onSubmit}>Submit</button>
      </header>
    </div>
  );
}