摘要：生命周期在版本中引入了机制。以后生命周期图解不包含官方不建议使用的事件处理事件的命名采用小驼峰式，而不是纯小写。只是在兄弟节点之间必须唯一受控组件使的成为唯一数据源。

JSX是一个 JavaScript 的语法扩展,可以很好地描述 UI 应该呈现出它应有交互的本质形式。

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。

JSX 里的 class 变成了 className

深入了解：

JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。

如下JSX代码：

  Click Me

会编译为：

React.createElement(
  MyButton,
  {color: "blue", shadowSize: 2},
  "Click Me"
)

元素是构成 React 应用的最小砖块。

React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

组件是由元素构成的。

false, null, undefined, true 是合法的子元素。但它们并不会被渲染。

以下的 JSX 表达式渲染结果相同：

{false}

{null}

{undefined}

{true}

组件名称必须以大写字母开头(React 会将以小写字母开头的组件视为原生 DOM 标签)

函数组件（以前称之为无状态组件，但Hook出来之后叫为函数组件）：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

class组件

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props

// 这段代码会在页面上渲染 “Hello, Sara”
function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById("root")
);

//上段代码渲染时发生了什么：
  1. 我们调用 ReactDOM.render() 函数，并传入  作为参数。
  2. React 调用 Welcome 组件，并将 {name: "Sara"} 作为 props 传入。
  3. Welcome 组件将 
Hello, Sara
 元素作为返回值。
  4. React DOM 将 DOM 高效地更新为 
Hello, Sara
。

有多种方式可以在 JSX 中指定 props。

JavaScript 表达式作为 Props

字符串字面量

props 默认值为true

使用this.setState()设置state的值

this.setState()可能是异步的

调用this.setState()的时候，React 会把你提供的对象合并到当前的 state。

react是单向数据流，任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。

在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用，并且也引入了新的 2 个 API 来解决问题。（Fiber 本质上是一个虚拟的堆栈帧，新的调度器会按照优先级自由调度这些帧，从而将之前的同步渲染改成了异步渲染，在不影响体验的情况下去分段计算更新。在之前的版本中，如果你拥有一个很复杂的复合组件，然后改动了最上层组件的 state，那么调用栈可能会很长，调用栈过长，再加上中间进行了复杂的操作，就可能导致长时间阻塞主线程，带来不好的用户体验。Fiber 就是为了解决该问题而生。）

class ExampleComponent extends React.Component {
  // 用于初始化 state
  constructor(props) {
    super(props)
    this.state = { hasError: false };
  }

  // 用于替换 `componentWillReceiveProps` ，该函数会在初始化和 `update` 时被调用
  // 因为该函数是静态函数，所以取不到 `this`, 如果需要对比 `prevProps` 需要多带带在 `state` 中维护
  // 它应返回一个对象来更新 state
  static getDerivedStateFromProps(nextProps, prevState) {}

  // 判断是否需要更新组件，多用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}

  // 组件挂载后调用
  // 可以在该函数中进行请求或者订阅
  componentDidMount() {}

  // 用于替换 componentWillUpdate ，该函数会在 update 后 DOM 更新前被调用
  // 用于读取最新的 DOM 数据。
  getSnapshotBeforeUpdate() {}

  // 组件即将销毁
  // 可以在此处移除订阅，定时器等等
  componentWillUnmount() {}

  // 组件销毁后调用
  componentDidUnMount() {}

  // 组件更新后调用
  componentDidUpdate() {}

  // 错误边界 - 渲染备用 UI
  // 更新 state 使下一次渲染能够显示降级后的 UI
  // 注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // 错误边界 - 打印错误信息
  // 你同样可以将错误日志上报给服务器
  // 注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误
  componentDidCatch(error, info) {
    console.log(error, info);
  }

  // 渲染组件函数
  render() {}

  // 以下函数不建议使用
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  // 接收到新的props时调用
  UNSAFE_componentWillReceiveProps(nextProps) {}
}

对于异步渲染，现在渲染有两个阶段：reconciliation 和 commit 。前者过程是可以打断的，后者不能暂停，会一直更新界面直到完成。

Reconciliation 阶段：

componentWillMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

Commit 阶段：

componentDidMount

componentDidUpdate

componentWillUnmount

因为 reconciliation 阶段是可以被打断的，所以 reconciliation 阶段会执行的生命周期函数就可能会出现调用多次的情况，从而引起 Bug。所以对于 reconciliation 阶段调用的几个函数，除了 shouldComponentUpdate 以外，其他都应该避免去使用。

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

为JSX内时间绑定this的几种方式：

constructor内处理：

constructor() {
  this.handleClick = this.handleClick.bind(this);
}

JSX内使用bind:

Delete Row

箭头函数：

 this.handleClick(id)}>Delete Row

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
key 只是在兄弟节点之间必须唯一

使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做受控组件。

表单数据将交由 DOM 节点来处理。使用非受控组件时如果想赋予组件一个初始值，但是不去控制后续的更新。 在这种情况下, 你可以指定一个 defaultValue 属性，而不是 value。

始终是一个非受控组件

redux-adcanve