React

1. 虚拟DOM：可以在渲染的时候只变化新增的地方，速度较快
2. JSX是JS的语法糖：使得写法简单，不需要用CreateElement嵌套代码，如下图

1. Babel将jsx翻译为js，Babel是将ES6及以上版本的代码转换为ES5的工具

2. 面向组件编程：

   1. 函数式组件，类式组件
   2. 组件实例的三大属性：
      1. state，可写于构造函数或直接在组件中，state不可直接更改，要使用setState
      2. props，传递标签属性，只读，组件类内部简写则加修饰符static
         1. Person.propTypes，标签数据校验 propTypes 与 React.PropTypes不同，

eg：PropTypes.string.isRequired，PropTypes.func

     2. Person.defaultProps:填充默认值
  3. refs：组件内的标签可以定义ref属性来标识自己
     1. this.refs.inputref1 --->得到一个input对象
     1. ref写法：
        1. 内联回调函数ref：<input ref={c=>this.input1 = c}  />
        1. 类组件绑定函数：<input ref={this.saveInputRef}  />
        1. createRef(返回一个容器)：inputRef = React.createRef();  <input ref={this.myRef}  />
        1. 字符串（不推荐）

1. 父子组件：props通信

2. 组件生命周期：

   1. 挂载（Mount），卸载（unmountComponetAtNode）

              生命周期hook函数<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/21714176/1642775825923-ffd8c2e4-f52a-481f-9014-75580ef5785f.png#clientId=u297714c6-5a3a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=371&id=u0ad9fc83&margin=%5Bobject%20Object%5D&name=image.png&originHeight=650&originWidth=1369&originalType=binary&ratio=1&rotation=0&showTitle=false&size=589734&status=done&style=none&taskId=u86867154-bf99-4fe5-97d2-7e40695518c&title=&width=782.2857142857143)

      1. componentDidMount：组件挂载完毕调用，在Render后边
      2. componentWillUnmount：组件卸载前调用
3. 非受控组件：现用现取，需要写Ref

受控组件：存到组件的state中，双向绑定，不需要写Ref

1. React语法：
   1. this代表组件实例对象
   2. 渲染组件：ReactDom.Render(,document.getElementById(‘test’));
   3. 
      
2. hooks：

1. 消息订阅-发布机制（兄弟组件使用）：pubsub —-订阅（命名），组件卸载时候取消订阅
2. redux

1. 组件间通信

1. React代理Proxy：

1. ES语法：

   1. 类中的方法默认开启局部的严格模式
   2. 箭头函数(c)=>{this.input1 = a} 省略写法 c => this.input1 = c; （左边一个参数，右边一句js的情况）
   3. ()=> 箭头函数的this，如果本身没有，会向函数上一层取寻找，等同于在构造方法中bind绑定函数。
   4. bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数和其原本的参数。
   5. reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值；reduce：const reducer = (previousValue, currentValue) => previousValue + currentValue;
   6. 高阶函数，如图，函数柯里化（SaveFormData）：

2. 官网和工具

   1. React Developer Tools —FaceBook
   2. FEHelper
   3. https://react.docschina.org/ 官网