第一章：Reac入门 与 第二章：React面向组件编程

目录

一、jsx语法规则

二、React中定义组件

1.函数式组件：

 2.类式组件：*有关类复习的知识点前往React知识铺垫查看https://blog.csdn.net/m0_61927991/article/details/126591057?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126591057%22%2C%22source%22%3A%22m0_61927991%22%7D

三、State状态

1.使用constructor配合写：注意事件绑定

2.state的简写模式

四、props（只读：不能进行修改）

1.props的基本使用：

2.对props进行限制：

3、props的简写：

4.函数式组件使用props

五、refs

1.字符串形式的ref：

2.回调函数形式的ref：

3.createRef

六、事件处理

七、react收集表单数据

1.非受控组件：

2. 受控组件：v-model

八、高阶函数柯里化

1.使用柯里化：

2.不使用柯里化

九、生命周期

1.引出生命周期：

2.生命周期旧

3.生命周期新

3.getSnapshotBeforeUpdate的使用场景

十、diffing算法

1.验证diffi算法

2.key的作用：

一、jsx语法规则

1.定义虚拟DOM的时候不要写引号。const VDOM = (

你好

)

2.标签中混入JS表达式时要用{}。  {name}

3.样式的类名指定不要用class，用className。

nihao

4.内联样式需要使用style={{key:value}}

5.只有一个根标签

6.标签必须闭合

7.标签首字母（1）小写开头为，html标签没有就报错 （2）大写开头，react就去渲染组件，没有组件就报错

二、React中定义组件

1.函数式组件：

function Demo() {
      console.log(this); //此处是undefined因为babel开启了严格模式 use strict
      return 
我是函数定义组件（适用于简单组件）的定义
}
//2.渲染组件到页面
ReactDOM.render(, document.querySelector('#test'))

 2.类式组件：*有关类复习的知识点前往React知识铺垫查看https://blog.csdn.net/m0_61927991/article/details/126591057?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126591057%22%2C%22source%22%3A%22m0_61927991%22%7D

// 1.创建类式组件
class MyComponent extends React.Component {
  render() {
     //render是放在哪里的？——Mycomponent类的原型对象上，供实例使用
     //render中this是谁？——Mycomponent的实例对象
     console.log('render中的this', this);
     return 
我是函数定义组件（适用于简单组件）的定义
   }
 }
//2.渲染组件到页面
ReactDOM.render(, document.querySelector("#test"))

三、State状态

用于区分复杂组件与简单组件，类式组件有state所以为复杂组件，函数式组件没有为简单组件

1.使用constructor配合写：注意事件绑定

使用state={数值}定义，使用this.setState({数值})来修改

2.state的简写模式

2.对props进行限制：

3、props的简写：

4.函数式组件使用props

五、refs

1.字符串形式的ref：

2.回调函数形式的ref：

3.createRef

六、事件处理

(1).通过onXxx属性指定时间处理函数(注意大小写)

            a.React使用的是自定义组件(合成)事件,而不是使用的原生DOM事件 ---为了更好的兼容性

            b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)----为了高效

(2).通过event.target得到发生事件的DOM对象 -----不要过度使用ref

七、react收集表单数据

1.非受控组件：

2. 受控组件：v-model

八、高阶函数柯里化

1.使用柯里化：

2.不使用柯里化

九、生命周期

1.引出生命周期：

2.生命周期旧

3.生命周期新

3.getSnapshotBeforeUpdate的使用场景

十、diffing算法

1.验证diffi算法

2.key的作用：