2018-08-01

第三天 主要回顾了一下 React 文档，有了新的体会

• 每次更新发生时都会调用 render 方法，但只要我们将 <Clock /> 渲染到同一个 DOM 节点中，就只会使用 Clock 类的单例。 这让我们可以使用额外功能，例如本地状态(state) 和 生命周期钩子。

• state 和 props 类似，但是它是私有的，并且由组件本身完全控制。

• 用类定义的组件有一些额外的特性。 这个”类专有的特性”， 指的就是局部状态。

• 类组件应始终使用 props 调用基础构造函数。

• 当组件输出被插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子

• 通过 setState(), React 得知了组件 state(状态)的变化, 随即再次调用 render() 方法，获取了当前应该显示的内容。React 于是据此对 DOM 进行更新。React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。因为 this.props 和 this.state 可能是异步更新的，你不能依赖他们的值计算下一个state(状态)。要解决这个问题，应该使用第 2 种 setState() 的格式，它接收一个函数，而不是一个对象。该函数接收前一个状态值作为第 1 个参数， 并将更新后的值作为第 2 个参数:

// 正确
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

• 组件(Components) 让你可以将用户界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计。从定义上来说， 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)， 并返回 React 元素，用以描述屏幕显示内容。

• DOM 标签的 React 元素 const element = <div />; 元素也可以代表用户定义的组件：
  const element = <Welcome name="Sara" />;

• 当 React 遇到一个代表用户定义组件的元素时，它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。

• 组件名称总是以大写字母开始。<div /> 代表一个 DOM 标签，而 <Welcome /> 则代表一个组件，并且需要在作用域中有一个 Welcome 组件。

• 提取组件可能看起来是一个繁琐的工作，但是在大型的 Apps 中可以回报给我们的是大量的可复用组件。一个好的经验准则是如果你 UI 的一部分需要用多次 (Button，Panel，Avatar)，或者本身足够复杂(App，FeedStory，Comment)，最好的做法是使其成为可复用组件。

• “纯函数” ，它们不会试图改变它们的输入，并且对于同样的输入,始终可以得到相同的结果。虽然 React 很灵活，但是它有一条严格的规则：所有 React 组件都必须是纯函数，并禁止修改其自身 props 。state 允许 React 组件在不违反上述规则的情况下, 根据用户操作, 网络响应, 或者其他随便什么东西, 来动态地改变其输出。

• 元素(Elements) 是 React 应用中最小的构建块(building blocks) 。一个元素用于描述你在将在屏幕上看到的内容：const element = <h1>Hello, world</h1>;

• 不同于浏览器的 DOM 元素， React 元素是普通的对象，非常容易创建。React DOM 会负责更新 DOM ，以匹配React元素（愚人码头注：DOM元素与React元素保持一致）。

• 有人可能会将元素与更广为人知的 “组件(Components)” 概念相混淆，元素是构成组件的”材料”。

• 单纯用 React 构建的应用程序通常只有一个单独的 根 DOM 节点。但如果你要把 React 整合进现有的 app 中 ，那你可能会有多个相互独立的 root DOM节点。

• 要渲染一个 React 元素到一个 root DOM 节点，把它们传递给 ReactDOM.render() 方法：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

• React 元素是不可突变的. 一旦你创建了一个元素, 就不能再修改其子元素或任何属性。一个元素就像电影里的一帧: 它表示在某一特定时间点的 UI 。就我们所知, 更新 UI 的唯一方法是创建一个新的元素, 并将其传入 ReactDOM.render() 方法.

• React 只更新必需要更新的部分。React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态。