React 相关面试题

[shuangmianxiaoQ]

虚拟 DOM 和 Diff 算法

虚拟DOM

用JS对象的形式来表示的一棵DOM树，本质上就是JS对象

Diff算法

标准的的Diff算法复杂度需要O(n^3)，这显然不能满足性能要求，而React中使得算法复杂度降低到了O(n)，主要是基于以下几点假设，也就是Diff策略：

1. Web UI中的DOM节点跨层级移动的操作特别少，可忽略不计
2. 两个相同组件产生类似的DOM结构，不同的组件产生不同的DOM结构
3. 对于同一层的一组子节点，可以通过它们唯一的id进行区分

基于以上三个策略，React分别对Tree Diff，Component Diff，ElementDiff做了算法优化，事实也证明以上策略合理且准确的

• Tree Diff：同层比较，如果发现同层节点有变化，则直接替换整个父节点及下面的子节点，而不是往下继续比较，这样一次遍历即可完成对整个VDOM树的比较

• Component Diff：如果是同一类型组件，则按照原策略继续比较VDOM树；否则将该组件判断为Dirty Component，从而直接替换下面的所有子节点。

• Element Diff：对于列表节点提供唯一的key属性可以帮助React定位到正确的节点进行比较，从而大幅减少DOM操作次数

生命周期

• 使用getDerivedStateFromProps代替componentWillReceiveProps
• 使用getSnapshotBeforeUpdate代替componentWillUpdate

新版本React中，产生以上变动的原因也是跟Fiber架构有关，Fiber有reconciliation和commit两个阶段，对应的生命周期如下：

• reconciliation（调度）
  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
• commit
  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

在调度阶段进行了任务分隔，涉及到 暂停 和 重启 ，因此可能会导致调度阶段的生命周期函数在一次更新渲染中被多次调用，产生一些意外的错误

• 使用建议
  • 在componentDidMount中添加事件监听，并在componentWillUnmount中解绑事件
  • 在componentDidMount中进行数据的请求，而不是在componentWillMount
  • 根据props更新state时，使用getDerivedStateFromProps(nextProps, prevState)
  • 在componentDidUpdate中监听props或者state的变化
  • 在componentDidUpdate使用setState时，必须加条件，否则进入死循环
  • 使用getSnapshotBeforeUpdate(prevProps, prevState)在更新之前获取最新的渲染数据
  • shouldComponentUpdate中做条件渲染，优化渲染的性能

setState

• 异步与同步
  • 在合成事件和生命周期中是异步的，在setState后无法立即获取到更新后的值，可以在第二个参数callback中获取最新值
  • 在原生事件和 setTimeout 中是同步的，可以马上获取到更新后的值
• 批量更新：setState更新时，会把所有状态合并后再进行更新（Object.assign），所以前面设置的key会被后面的覆盖
• setState第一个参数使用回调函数，可以避免批量更新的逻辑

高阶组件

高阶组件不是组件，而是一个增强函数，输入一个元组件，返回一个新的增强组件

// 将受控组件转为非受控组件
const WithChangeInput = Input => {
  return class extends Component {
    state = { value: "" };

    handleChange = e => this.setState({ value: e.target.value });

    render() {
      return (
        <Input
          {...this.props}
          value={this.state.value}
          onChange={this.handleChange}
        />
      );
    }
  };
};

const Input = props => <input value="" {...props} />;
const HOCInput = WithChangeInput(Input);

Redux

核心理念

• 单一数据源
• 状态只读，Redux Store中的数据无法直接修改
• 纯函数，通过纯函数Reducer来修改状态，不要直接修改state，而是返回一个新的state

工作流

React-Redux

• <Provider>：将store通过context传入组件
• connect：高阶组件，方便在组件中使用Redux
  • mapStateToProps：将store通过props传入
  • mapDispatchToProps：将dispatch的action通过props传入

Redux 中间件

在Action和Store之间，对dispatch的增强

• redex-thunk：处理副作用，异步逻辑放在action中处理
• redux-saga：处理副作用，异步逻辑放在单独的文件中管理，适合复杂应用场景，使用Generator函数编写
• redux-persist：数据持久化
• redux-logger：打印Redux日志 ......

React Hooks

使用函数组件来代替类组件

• useState：类似this.state和this.setState的替代

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>Click me</button>

• useEffect(callback, [source])：可以看做是 componentDidMount、componentDidUpdate和componentWillUnmount的结合，第二个参数用于设置触发条件，仅当source改变时才会触发

• useRef：获取组件真实节点

函数式编程

函数式编程是一种编程范式，常见的其他编程方式如命令式编程（面向过程），面向对象编程。

理念

• 纯函数：相同的输入，永远会得到相同的输出，而且没有任何副作用。具体条件如下：
  • 不修改参数
  • 不依赖、不修改函数外部的数据
  • 不包含副作用，如异步，IO操作，Date对象，Math.random()等
• 函数柯里化（curry）：可使用ramda库
• 函数组合（compose）：扁平化嵌套，避免嵌地狱，如f(g(k(x))) -> compose(f, g, k)(x)
• 数据不可变性（Immutable）：不要修改原数据，而是返回一个全新的对象，可使用Immutable.js库
• 高阶函数：以函数作为参数，或是将函数作为返回值的一类增强函数，通常用于隔离抽象，函数组合和函数增强

函数式编程的好处

• 副作用小，函数之间独立存在，没有任何耦合，复用性极高
• 追求单元化，粒度化
• 更易于单元测试