React 面试演练

前面提到

• 组件之间如何通讯
• JSX 本质是什么
• context 是什么，如何应用？
• shouldComponentUpdate 的用途
• redux 单向数据流过程
• setState 场景题

补充的

• 什么是纯函数？
• 组件生命周期
• React 发起 ajax 应该在哪个生命周期？
• 渲染列表时，为何用 key ？
• 函数组件和 class 组件的区别？
• 什么是受控组件？
• 何时将使用异步组件？
• 多个组件有公共的功能，如何抽离？
• setState 是同步还是异步？—— 场景题，代码如下
• redux 如何进行异步请求？
• react-router 如何异步加载？
• PureComponent 相比于普通组件有何不同
• React 事件和 DOM 事件有何不同？
• React 如何性能优化？

// setState 同步还是异步？场景题
class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};