React
React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图），并且 React 拥有较高的性能，代码逻辑非常简单。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
JSX 语法
JSX 通俗来说就是 JavaScript 与 XML
JSX 语法的特点：
单个根元素
单标签一定要闭合
img 标签一定要有 alt 属性
标签都是小写字母，组件首字母大写
class 要写成 className
for 要写成 htmlFor
写 style 样式要写成对象的形式
jsx 的注释：使用 js 的注释
jsx 的插值表达式
使用单个 花括号 来作为表达式
只能是简单的单个表达式，不能是语句也不能是条件或循环语句。
如果要使用条件的，可以采用 三元运算符（三目运算符）
{ ‘’ } | { false } | {null} | {undefined} 这些情况的话，会没有任何输出v-html 需要时
dangerouslySetInnerHTML这个属性，dangerouslySetInnerHTML这个属性需要接受一个对象的 value
组件
React 中没有全局组件的概念，你要使用哪个组件，必须要引入进来使用
组件的定义
函数式组件
定义一个函数，然后 return 出来一段 jsx 语法。这一段 jsx 语法就是这个组件的模板内容
函数名字就是组件的名字，所以首字母要大写
类组件
定义一个类，类名就是组件名（大写首字母）
这个类需要继承 React.Component 这个基础组件
类中的 render 函数是必须，render 函数 return 出来是一段 jsx 语法，这一段 jsx 语法就是这个组件的模板内容
组件的注意事项
组件的模板内容，如果需要换行去写的话，那么请使用 ( ) 包裹起来
组件的模板内容是 jsx 语法，所以还需要保证 jsx 特点
组件的 props 属性
- 调用组件时，在组件标签上写的属性，属性名就是个 prop
- props 是个集合 ， prop 是具体的某一个
- vue 中要使用 props. 首先需要在组件中定义 props 的选项，而 react 中不需要
组件 prop 的校验
需要安装 prop-types 的模块
1 | npm install --save-dev prop-types |
组件中的 State
State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件
组件有没有状态，主要就看这个组件有没有 state
一般 类组件就可以称为 有状态组件， 函数组件 叫 无状态组件
想让组件自己去更新 UI，那么首先需要让这个组件有自己的 state。 然后 state 如果发生变化，它就会重新渲染。
组件要有变化，两种方式
组件接收到的 props 有了变化
组件自身的 state 有了变化，组件的 state 或 props 有变化，组件就会更新，更新的效果其实就是类组件的 render 函数重新执行了，函数组件重新调用了
PS: 1. 如果要让组件有 state, 首先要确保这个组件是类组件。
- 要在 构造函数中定义 状态的初始值。 3. 写了 构造函数的话，就必须在构造函数的第一行调用父类的构造函数 super()
组件通信
父组件 – > 子组件： porp
子组件 –> 父组件:
调用子组件的时候，传递一个自己的方法下去，这个方法里面有修改自己 state 的功能
子组件通过 this.props.propName()
事件处理函数需要 修改 this 指向
不能使用 apply 与 call,apply 与 call 会立即执行，而 bind 是返回一个新的函数
jsx bind （ 不推荐 ）
箭头函数 （ 不推荐 ）
统一在 构造函数 中去做 this 绑定 （ 推荐 ）
使用 实验性 public class fields 语法 （ 推荐 ）