1. JSX

    约等于React.createElement();
    JSX会被转为普通javascript函数调用，取值过后赋予js对象。
    建议分号包裹内容，特别是长文本，避免自动分号陷阱，也就是空换行自动补上分号；

    1. 元素渲染

    React元素是不可变对象，无法改变其子元素或者属性，唯一更新方式是创建全新的元素进行render。

    1. 组件&props

    函数组件本身就只是js函数
    从组件自身角度命名props，保证自己是纯函数，即不会尝试修改入参，多次调用相同参数返回想通过结果。

    1. state & 生命周期

    将部分props的属性用state进行替换。
    componentDidMount(): 组件已经被渲染到DOM中后进行。
    可以在class组件中随意添加不参与数据流的额外字段。
    componentWillUnmount(): 组件即将被DOM移除。
    直接修改state不会触发重新渲染。
    setState使用的是浅合并，替换对应属性，合并其他属性。
    setState((state, props) => { … } ) 而不是直接setState({ this.state… this.props…}) 因为二者异步更新
    向下的数据流：任何state只属于特定的组件，从该state派生的任何数据和UI只能影响低于它们的组件。

    1. 事件处理

    阻止默认行为： 显示声明e.preveentDefault
    this指向问题： 需要使用bind或者箭头函数

    1. 条件渲染 + 列表和Key

    可控制组件UI显示
    key是必须的: 不宜使用下标，可能造成非受控组件互相篡改数据。且key不被props捕捉。

    1. 表单

    受控组件：被React控制使state成为其唯一数据源，且控制用户输入时表单发生操作的输入元素称为受控组件。
    input 设置null / undefined 后输入将被限制。
    始终是非受控组件，值只能由用户选取，不能代码控制。
    使用什么受控组件还是非受控组件
    image.png
    img from https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

    1. 状态提升

    多个组件需要共享的state向上移动到最近共同父级。
    基于向下数据流，比双向绑定，state保持一致更加容易排错。

    1. 组合继承

    包含关系： 通过props.children 或者其他自定义属性获取组件内容。
    特例关系： 一个组件是另一个组件的实例。

    1. React哲学

    单一功能原则： 一个组件原则上只负责一个功能
    a. 划分层级 -> b.静态版本 -> c. state最小且完整版 -> d. state放到哪个组件里 -> e. 添加反向数据流
    c:

    1.   1. 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。 props
    2.   1. 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。  可定义为常量
    3.   1. 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。 可进行状态提升/props拿到，不算最小state