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 构建界面的思考过程：

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

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

要知道它是否是状态，只须要问三个问题：

1. 数据是从父级过来的吗？若是是，它可能不是状态。
2. 数据是否随时间保持不变？若是是，它可能不是状态。
3. 能够根据组件的属性或状态来计算它吗？若是是，它可能不是状态。

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

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

1. 肯定使用该状态的每一个组件。
2. 查找最接近的共同祖先。
3. 最接近的共同祖先应该拥有该状态。

最后

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