简述props和state的作用和应用场景

1、简述props和state的作用和应用场景？（难易指数：☆）

React的数据流：由父节点传递到子节点（由外到内传递），如果顶层组件某个prop改变了，React会向下传递，重新渲染所有使用过该属性的组件。

除此之外React 组件“内部”还具有自己的“状态”，这些状态只能在组件内部修改。通过与用户的交互（点击事件），实现不同状态（显示、隐藏、数量增加...），然后渲染UI，让用户界面和数据保持一致。
React中只需更新组件的state，然后根据新的 state 重新渲染用户界面。

this.props 属性:由外部世界传入到组件内部，只读，不可修改。

this.state 状态:由组件自己创建，记录内部变化，可以修改，一般由用户交互产生新的状态(数据)。

总结

1、 状态的初始化,在constructor中使用this.state方法来定义初始化状态
2、 如果要修改状态，必须使用this.setState({newState:newValue})

React组件显示的变化，都是通过状态的修改，自动（重写）渲染到页面中。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。

state属于内部状态维护。
props属于外部传入（定义）。

2、简述PropsType的作用，并举2个常见例子。（难易指数：☆）

React组件创建的时候，需要传入属性，我们可以使用使用PropTypes进行类型检查，您可以使用React.PropTypes在组件的道具上运行。

React.PropTypes 自 React v15.5以来，它已经进入了一个不同的包--”prop-types”.

安装

yarn add prop-types -D

使用

import PropTypes from 'prop-types';
PropTypes.array  //检测数组类型
PropTypes.bool  //检测布尔类型
PropTypes.func  //检测函数类型
PropTypes.number  //数字
PropTypes.object  //对象
PropTypes.string  //字符串
PropTypes.symbol  //symbol
PropTypes.instanceOf()  //继承自XXX
PropTypes.oneOf([‘值1’,’值2’])  //任意一个值
PropTypes.oneOfType([ PropTypes.array, PropType.bool ... ])  //数组内任意一种类型

默认情况下，验证器将props视为可选属性。

class LifeCycle extends React.Component{
    static propTypes = {  // 定义默认参数
        name:PropTypes.string
    }
}

3、简述组件的生命周期及对应作用（难易指数：☆☆）

React生命周期可以分成三个阶段：

1、挂载阶段：对象创建到完全渲染（实例化）
2、运行阶段：组件状态的改变（最长阶段）
3、卸载阶段：组件使用完毕后，或者不需要存在与页面中，那么将组件移除，执行销毁。

生命周期(三个阶段)
    1. 挂载阶段（组件初始化及第一次渲染）
       生命周期钩子函数
        constructor: 状态初始化
        componentWillMount: 通知函数，状态初始化完毕，可以开始渲染（在REACT 17.0会被废弃）
        render: 渲染函数，进行组件渲染
        componentDidMount: 通知函数，初始化渲染完毕，可以发送初始化ajax请求数据


    2. 运行阶段（所有函数调用次数>=0）
        componentWillReceiveProps: 自定义属性发生变化
        shouldComponentUpdate: 是否允许组件渲染（true允许，false阻止）
        componentWillUpdate：通知函数：组件将要更新
        render: 渲染函数
        componentDidUpdate: 通知函数：组件更新渲染完毕

    3. 销毁阶段
        componentWillUnmount: 卸载前的最后一次通知（资源回收！！！）


    3个最重要的钩子
    constructor 定义状态
    componentDidMount 初始化ajax数据

    componentWillUnmount 卸载组件，回收资源（例如定时器）
      //卸载函数（性能优化挂钩的函数！！）
      //资源回收及释放（例：定时器之类就在此函数内进行回收！！！！！！）

4、简述在生命周期中的哪一步你应该发起 AJAX 请求，为什么（难易指数：☆☆）

componentDidMount: 通知函数，初始化渲染完毕，可以发送初始化ajax请求数据

5、简述受控组件和不受控组件的区别（难易指数：☆☆）

this.props 属性:由外部世界传入到组件内部，只读，不可修改。
this.state 状态:由组件自己创建，记录内部变化，可以修改，一般由用户交互产生新的状态(数据)。