react高频面试题总结（附答案）

hooks 为什么不能放在条件判断里

以 setState 为例，在 react 内部，每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中

update 阶段，每次调用 setState，链表就会执行 next 向后移动一步。如果将 setState 写在条件判断中，假设条件判断不成立，没有执行里面的 setState 方法，会导致接下来所有的 setState 的取值出现偏移，从而导致异常发生。

父子组件的通信方式？

父组件向子组件通信：父组件通过 props 向子组件传递需要的信息。

// 子组件: Child
const Child = props =>{
   
  return <p>{
   props.name}</p>
}
// 父组件 Parent
const Parent = ()=>{
   
    return <Child name="react"></Child>
}

1
2
3
4
5
6
7
8
9
10
11
12

子组件向父组件通信：: props+回调的方式。

// 子组件: Child
const Child = props =>{
   
  const cb = msg =>{
   
      return ()=>{
   
          props.callback(msg)
      }
  }
  return (
      <button onClick={
   cb("你好!")}>你好</button>
  )
}
// 父组件 Parent
class Parent extends Component {
   
    callback(msg){
   
        console.log(msg)
    }
    render(){
   
        return <Child callback={
   this.callback.bind(this)}></Child>    
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

React 数据持久化有什么实践吗？

封装数据持久化组件：

let storage={
   
    // 增加
    set(key, value){
   
        localStorage.setItem(key, JSON.stringify(value));
    },
    // 获取
    get(key){
   
        return JSON.parse(localStorage.getItem(key));
    },
    // 删除
    remove(key){
   
        localStorage.removeItem(key);
    }
};
export default Storage;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在React项目中，通过redux存储全局数据时，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。这时就会有全局数据持久化存储的需求。首先想到的就是localStorage，localStorage是没有时间限制的数据存储，可以通过它来实现数据的持久化存储。

但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。其使用步骤如下：

（1）首先要安装redux-persist：

npm i redux-persist

1
2

（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：

import {
   createStore} from 'redux'
import reducers from '../reducers/index'
import {
   persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
1
2
3
4
5
6
7