React 快速入门小记

大约半个月前，我一直在思考一个问题，Angular、React 和 Vue，究竟该学什么？

听取了几位前辈的意见，也综合考虑了各方面的原因，最终选择了 React，希望我“没有选错”。

十天的时间，把 React 的快速入门文档给过了一遍，整理了一些笔记，现在记录如下。

JSX 简介

可以在 JSX 中嵌入 JavaScript 表达式，并用花括号包裹。

使用括号包裹 JSX 表达式，并将其拆分为多行以提高可读性。也可以避免自动插入分号。

由于 JSX 是在 JavaScript 中使用的，React DOM 的属性使用 camelCase 命名。

JSX 是安全的，可以防止注入攻击。

渲染元素

元素是元素，组件是组件。

React 元素是只读的，一旦创建，就不能改变它的子元素和属性。

就目前来说，更新 UI 的唯一方法是创建一个新的元素，并传递给 ReactDOM.render()。

在实践中，大多数应用程序只调用一次 ReactDOM.render()。

当调用 ReactDOM.render() 时，只有发生改变的节点才会被 React DOM 更新。

组件和属性

从概念上讲，组件就像 JavaScript 函数，它们接收输入，并返回 React 元素。

可以使用 ECMAScript 6 的类来定义组件，类有一些额外的功能。

组件的名称总是以大写字母开始。

组件中可以使用组件。

如果要将 React 集成到现有应用程序中去，可以优先编写小的组件，自下而上。

组件越小越好。

一个好的经验法则：如果 UI 被多次使用，或者 UI 本身足够复杂，那么就可以将它做成组件。

组件的属性是只读的。

所有的 React 组件必须像纯函数那样使用它们的属性。

状态和生命周期

状态类似于属性，但它是私有的，完全由组件控制。

componentDidMount() 在组件呈现到 DOM 之后运行。

状态有特殊的意义，如果需要存储不影响视觉输出的内容，并不在 render() 中使用，则可以手动向类中添加其它字段。

不要直接修改状态，而是通过调用 this.setState() 来修改状态。

React 可以将多个 this.setState() 调用批处理为一个 this.setState() 以实现性能上的提升。

更新状态是异步的，不能依赖上一个状态值来计算下一个状态值。

要解决它，应当使用函数而不是对象。该函数将接收先前的状态做为第一个参数，并将属性做为第二个参数。

当调用 this.setState() 时，React 会将对象合并到当前状态。

父组件和子组件都不知道某个组件是有状态还是无状态的，并且不应该关心它是否被定义为函数或类。

组件可以选择将状态做为属性传递给子组件。

组件以及它的数据只能影响子组件，这通常被称为自上而下或单向数据流。

处理事件

DOM 事件使用全小写命名，而 React 事件使用 camelCase 命名。

使用 JSX 传递一个函数做为事件处理程序。

不能返回 false 来阻止 React 中的默认行为。必须显式调用 event.preventDefault()。

当使用 ECMAScript 6 的类定义组件时，常见的做法是将事件处理程序做为类上的方法。

如果在 ECMAScript 6 的类中使用事件，必须手动在构造函数中绑定。

或者在回调中使用箭头函数，但是每次呈现时都会创建不同的回调。大多数情况下这么做是可以的，但是在底层组件中，可能会执行额外的渲染，一般建议在构造函数中绑定，以避免这种性能问题。

条件呈现

如果条件过于复杂，可能是提取组件的好时机。

列表和键

应给数组中的元素赋予键，以给元素一个唯一的身份。

如果数组中的元素是组件，应该将键保存在组件上，而不是组件中的元素上。

一个好的经验法则是，map() 中的元素需要键。

键被 React 使用，不会传递给组件，如果要使用，则使用不同的名称，做为属性显式传递。

如果嵌套太深，可能是提取组件的好时机。

表单

值不会随用户的输入而改变，因为组件已声明值，且始终是原来的值。

若要响应用户输入的值，则使用 onChange 事件保存用户输入的值。

要初始化具有非空值的不受控制的组件，可以使用 defaultValue/defaultChecked 属性。

对于 <input> 和 <textarea> 应该使用 onChange 而不是 oninput。

在 React 中，要使用受控制的表单组件。

如果在 <textarea> 中使用文本节点插入值，那么它的行为将类似于 defaultValue。

状态提升

对于在 React 应用程序中发生变化的任何数据，应该有一个单一的“真实来源”。通常，首先将状态添加到需要渲染的组件。然后，如果其他组件也需要它，可以将其提升到最接近的共同祖先。而不是尝试在不同组件之间同步状态，应该依赖于自上而下的数据流，或者说是单向数据流。

如果一些变量可以从属性或状态派生，它可能不应该设置为状态。

组合与继承

建议使用组合而不是继承来重用组件之间的代码。

组件可以接收任意属性，包括原始值、React 元素以及函数。

如果要在组件之间重用非 UI 的功能，建议将其提取到单独的 JavaScript 模块中。

在 React 中思考

使用 React 构建界面的思考过程：

打破 UI 进入组件层次结构。
在 React 中构建静态版本。
确定最少但完整的状态。
确定状态应该储存在哪个组件。
添加反向数据流。

单一职责原则：一个组件应该只做一件事。

要知道它是不是状态，只需要问三个问题：

数据是从父级过来的吗？如果是，它可能不是状态。
数据是否随时间保持不变？如果是，它可能不是状态。
可以根据组件的属性或状态来计算它吗？如果是，它可能不是状态。

数据不是从父级过来的，会随时间变化，并不可以被计算出来，那么它就是状态。

对于应用程序中的每个状态：

确定使用该状态的每个组件。
查找最接近的共同祖先。
最接近的共同祖先应该拥有该状态。

最后

源码：https://github.com/chnhyg/react-demo