核心概念

React 是JavaScript 库，可以快速构建快速响应的大型WEB应用程序。

JSX
        JSX是一种 JavaScript 的语法扩展，可以很好的描述UI应该呈现的交互本质并具有 JavaScript 的全部功能。

为什么使用JSX：
        React 认为渲染逻辑本质与其他UI逻辑 内在耦合， JSX 和 UI 在一起，会在视觉上产生辅助的作用，还可以使React 显示更多的错误和警告消息。
        Babel 会把 JSX 转义为 React.createElement() 函数调用。这个对象被称为 React 元素。

元素渲染
        和浏览器DOM 不同 React 元素是开始极小的普通对象，React DOM 会负责将React 元素 和 DOM 进行关联并渲染到根元素中。
        React 元素是不可变对象，一旦被创建，就无法更改。每次更新都会创建一个新元素，但 ReactDOM 会将元素和他的子元素与他们之前的状态进行比较（diff）,只进行必要的更新。

组件 和 Props
        React 鼓励将UI拆分为独立可复用的代码，这些独立可复用的代码，可作为组件。概念上，组件为接受任意的入参（props）,并返回用于描述页面展示内容的React元素。(组件的首字母必须大写)

函数组件 和 class 组件
        函数组件：使用 function 创建的组件
        class 组件 使用关键字class 并用extends继承React.Component

Props
        Props 是只读的，组件本身禁止修改props的值。

生命周期
        只有class 组件 有用生命周期
        生命周期一共包含4部分
                挂载：组件实例被创建并插入dom中时，调用顺序
                        constructor()
                                初始化state 绑定props 和 方法
                        static getDerivedStateFromProps()

                在调用render前调用，
                        render()
                                渲染元素
                        compomentDidMount()
                                组件挂在后立即调用，只执行一次

                更新：组建state 或者 props 更新时执行，调用顺序
                        static getDerivedStateFromProps()
                        shouldComponentUpdate()
                                默认返回true，根据返回值来判断是否重新渲染。首次调用或使用
                        forceUpdate（）
                                不会触发，在初始化和更新都会调用，
                        render()
                        getSnapshotBeforeUpdate()
                                在渲染输出之前调用，可以在组件更新之前获取一些DOM信息，返回值将传递给componentDidUpdate()
                        componentDidUpdate()
                                更新后立即调用，首次渲染不调用，尽量直接使用props的值来比较state

                卸载：组建从DOM移除会调用
                        componentWillUnmount()
                                卸载时调用，执行一些清理工作，例如清除timer，监听，取消网络请求等
                                错误处理：渲染过程，生命周期或子组件的构造函数抛出错误时
                        static getDerivedStateFromError(error)
                                抛出错误后被调用，渲染阶段调用，不用存在副作用
                        componentDidCatch(error,info)
                                error：抛出的错误
                                nfo：带有componentStack key 的对象 包含组件引发错误的栈信息。

事件处理
        React 元素的事件处理和DOM元素很相似，但是语法不同：
        React 的事件的明明采用小驼峰（namelCase）,而不是纯小写。
        使用JSX语法时需要传入一个函数而不是字符串。
        React 不能通过返回 false 来阻止默认行为，而必须使用preventDefault。
        React 默认不会绑定this，如果没有绑定this，则返回undefined。

条件渲染
        遵从JavaScript语法，支持if else && 三目运算符等，如果先阻止渲染，在render 内返回null。

列表和key
        当使用map循环输出的时候，需要指定一个key，key最好不要是index 索引值，因为数组是有序的集合，如果数组中一位改变了，后面的都改变了，这不符合设计key 的初衷。

表单
        主要是受控组件 和 非受控 组件的概念理解。以及解决方案Formik

状态提升
        如果各子组件一样要处理相同的数据，就要将共享得数据提升到父组件里。 在React内，任何的可变数据都应该对应唯一的数据源。推荐开发工具查看状态变化（react-devtools）