概念性问题整理

[shoutingwei]

1. React的生命周期函数，在哪一步发起Ajax请求？
2. Component 与 Element的区别
3. Class Component与Functional Component
4. refs的作用
5. keys的作用
6. Controlled Component 与 Uncontrolled Component
7. shouldComponentUpdate的作用
8. 如何告诉React他应该编译生产环境版本？
9. 为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？
10. 概述下 React 中的事件处理逻辑
11. createElement 与 cloneElement 的区别是什么？
12. 传入 setState 函数的第二个参数的作用是什么？
13. setState之后的发生了什么事？
14. 下述代码有错吗？

    this.setState((prevState, props) => {
    return {
    streak: prevState.streak + props.count
    }
    })

15. react性能优化是哪个周期函数？
16. 为什么虚拟dom会提高性能?
17. diff算法?
18. 简述flux 思想
19. React项目用过什么脚手架？Mern? Yeoman?
20. react组件的划分业务组件技术组件？
21. redux有什么缺点？
22. redux中间件？
23. 如果你创建了类似于下面的Twitter元素，那么它相关的类定义是啥样子的？

    <Twitter username='tylermcginnis33'>
    {(user) => user === null
    ? <Loading />
    : <Badge info={user} />}
    </Twitter>

    import React, { Component, PropTypes } from 'react'
    import fetchUser from 'twitter'
    // fetchUser take in a username returns a promise
    // which will resolve with that username's data.
    class Twitter extends Component {
    // finish this
    }

[shoutingwei]

1. React生命周期

static componentWillReceiveProps是本组件收到新props就会发生，还是不论是否收到，只要外部组件有render就会发生？

第一阶段： 初始化 初始化props

static defaultProps = {
    name: 'sls',
    age:23
};
//or
Counter.defaltProps={name:'sls'}

初始化state

constructor() {
    super();
    this.state = {number: 0}
}

componentWillMount() 组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作？？？？

render() 组件渲染

componentDidMount() 元素已经渲染过了，可以做与DOM相关操作

第二阶段：运行中 componentWillReceiveProps() 组件收到新的props

shouldComponentUpdate() 收到新的props 和 state时触发，首次渲染不触发

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

一般通过该函数来优化性能： 一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染

可在shouldComponentUpdate()中加入条件判断，从而优化性能。

例如React中的就提供了一个_PureComponent_的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组

componentWillUpdate() 组件即将被更新时触发

componentDidUpdate() 组件被更新完成后触发。页面中产生了新的DOM的元素，可以进行DOM操作

3. 销毁阶段 componentWillUnmount() 组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消Redux的订阅事件等等。