jsx

• 本质是js对象，会被babel编译，最终会被转换成React.createElement
• 每个jsx表达式有切只有一个根节点，
  • 如果不想要根节点可以用React.Fragment或者<></>
• 每个jsx元素必须结束(XML规范)

在jsx中插入表达式

• 会把表达式作为内容的一部分
  • 不会显示null 和underfine 和false
  • 普通对象不能被显示
• 注释
  • {/* */}
• 把表达式作为元素属性
• 属性使用小驼峰命名法
• 防止注入攻击
  • 自动编码
  • dangerouslySetInnerHtml

元素的不可变性

• 虽然jsx元素是一个对象，但是该对象中的所有属性不可更改
• 如果确实需要改变元素属性，需要重新创建jsx元素

组件和组件的属性

组件：包含内容、样式和功能的UI单元

创建一个组件

组件的首字母必须大写c

为什么要让首字母大写 大写生成的react是组件元素，小写会识别为普通的组件

• 1.函数组件

  • 返回一个react 元素
  • 返回JSX表达式

• 2.类组件

  • 必须继承React.Component
  • 必须用render函数去渲染元素

组件的属性

• 对于函数的组件，属性会作为一个对象的属性，传递给函数的参数
• 对于类组件，属性会作为一个对象的属性。传递给构造函数的参数

注意：组件的属性，应该使用小驼峰命名法 组件无法改变自身的属性。

之前学习的react元素，本质上就是一个组件（内置组件）

React中的哲学：数据属于谁，谁才有权利改动 React中的数据是自顶而下流动的（单向数据流）

组件状态

组件状态：组件可以自行维护的数据 组件状态仅在类组件中有效

state(状态)，本质上是类组件的一个属性，是一个对象

状态初始化

• 在构造函数中初始化
• 试验性阶段

状态的变化 不能直接改变状态，因为不能监控到属性变化

• 必须使用this.setState({}) 一旦调用了this.setState 组件会重新渲染

组件中的数据

1.props:该数据是由组件的使用者传递的数据。所有权不属于组件自身，因此组件无法修改该数据 2.state:该数据是由组件自身创造的，所有权属于组件自身，因此组件有权改变数据

事件

在react组件的事件，本质上就是一个属性

按照之前对react对组件的约定，因此组件的事件必须要用小驼峰

如果没有特殊处理，在事件处理函数中。this指向undefine

1.使用bind函数，绑定this 2.使用箭头函数

深入认识setState

setState 他对状态的改变，可能是异步的

如果改变状态的代码处于某个HTML元素的事件中，则是异步的，否则是同步的