React 初学者基础知识总结

参加了一个很有意思的公司的招聘，在笔试的时候需要学习 React 并且做出一个用户列表。

很庆幸在网络上有很多很好的前辈，他们的无私分享我才能顺利学习 React ，并且得到面试官的肯定。

首先要感谢的是王福朋老师，在慕课网上也看到过王老师的面试课程，讲的非常好，对我找工作帮助非常大。使用React并做一个简单的to-do-list 是我进行 React 学习的基础。里面介绍了两门 React 入门课程我都看了，也非常感谢 

阮一峰老师的 React 入门实例教程

慕课网的 React入门

十分详细的React入门实例 这篇文章对我最大的帮助是在表单验证方面，参考了新增人员方面的代码，给我在细节方面的帮助较多。

接下来想要按照自己的理解对这些帮助我的文章做一个总结，也算是讲讲自己理解的 React 和一些做用户列表的时候遇到的一些问题。

---

一、React 基本知识

首先对 React 进行一个简单的介绍，React 是运用组件化开发思路。最重要的是 render 这个方法（我理解为渲染组件方法）

JSX 语法是 React 的一大特色，允许 HTML 和 JavaScript 的混写

我们用 React.createClass() 创建 React 组件（对象），在组件中 render 方法必须定义

1. React 准备工作

在我们使用 React 之前，需要引入一些库，还需要对 script 标签的 type 做一些修改，才能在浏览器中看到 React 组件

react.js 是 React 的核心库

react-dom.js 提供与 DOM 相关的功能（注：React 组件被插入之前为虚拟 DOM）

browser.js 的作用是将 JSX 语法转为 JavaScript 语法

将 script 标签的 type 属性设置为 text/babel

render 方法返回 HTML 模板，通过 ReactDOM.render() 插入组件

ReactDOM.render() 接受两个参数，第一个为 React 组件，第二个为组件插入的容器

2.React 的生命周期以及生命周期中出现的函数

React 组件有三个状态：Mounted  Update  Unmounted

Mounted 指的是 React 组件首次 render 的过程

Update 指的是 React 组件被重新 render 的过程

Unmounted 指的是 React 组件被移除的过程

在这里我讲几个用的比较多的函数

在 Mounting 过程中，getInitialState() 方法可以用于定义组件的初始状态（state），在我们与用户交互的时候产生变化的特性，比如我们可以利用 state 初始化组件的样式

componentWillMount() componentDidMount() 这两个函数在 render 方法调用前、后分别调用。可以在页面插入组件前后改变组件的 state （setState() 方法）

3.JSX语法

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 ｛开头），就用 JavaScript 规则解析

JSX 语法允许直接在模板插入 JavaScript 变量，如果这个变量是一个数组，则会展开这个数组的所有成员（数组成员可以为 HTML 元素）

二、React 组件

React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass() 方法就用于生成一个组件类。

所有组件都必须有自己的 render 方法，用于输出组件。组件类的第一个字母必须大写。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性（组件属性用 this.props 对象获取）

组件属性 class 需要用 className 代替，for 用 htmlFor 代替，因为 class 和 for 为 JavaScript 保留字。

1.this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，this.props.children 表示组件所有子节点。

this.props.children 的值有三种可能：

如果当前组件没有子节点，它就是 undefined；如果有一个子节点，数据类型是 object；如果有多个子节点，数据类型是 array。

React 提供一个工具方法 React.Children 来处理 this.props.children，我们可以用 React.Children 来遍历子节点，而不用担心 this.props.children 的数据类型

2.propsType

组件的属性可以接受任意值，组件类的 PropsType 属性，就是用来验证组件实例的属性是否符合要求。

阮一峰老师教程中的例子

React.PropTypes.string.isRequired  这个 title 为必须的，而且它的值必须是字符串，如果值不符合会出现 Warning

另外，getDefaultProps 方法可以用来设置组件属性的默认值

3.React 中的 DOM

组件并不是真正的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM。只有当它插入文档以后，才会变成真实的 DOM。

所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实的 DOM 上（DOM Diff），极大的提高网页的性能表现

有时需要获取到真实的 DOM 节点，这时就要用到 ref 属性（this.refs.[refName]），等到虚拟 DOM 插入到文档以后才能使用

看到使用较多的方法为 React.findDOMNode(this.refs.[refName])

this.refs.[refName].getDOMNode()，直接使用 this.refs.[refName] 获取也可以

4.this.state

React 将组件看成是一个状态机，一开始有一个初始状态，和用户互动导致状态变化，从而触发重新渲染。

getInitialState() 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取

当用户与组件互动导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 render 方法渲染组件

this.props 和 this.state 都用于描述组件的特性，一个简单的区分方法： this.props 表示那些一旦定义，就不再改变的特性（如上文的 item），而 state 是会随着用户互动而产生变化的特性。

5.表单

用户在表单填入的内容，属于用户跟组件的互动，应该用 this.state 读取

例子来自阮一峰老师的教程

如文本输入框，需要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值

三、实现 todo-list 

主要讲一下在实现 todo-list 时，需要注意的地方，详细的请见王福朋老师的教程。

首先进行整体分析：将 TodoList 分为一个总组件和两个子组件，子组件一个输入内容，一个显示内容列表

然后将数据显示到列表中：React 提倡所有的数据都是由父组件管理，通过 props 的形式传递给子组件来处理。针对父组件，用 state 存储（内部信息）；对子组件，数据为外部信息，使用 props。

新增数据：需要让父组件开放一个可以修改数据的接口，然后将接口作为 props 传递给子组件，让其能修改数据（在父组件的子组件中添加属性作为接口）

删除数据：与新增数据类似

四、实现用户列表中遇到过的问题

UserList 为总组件，点击按钮对列表进行删除的事件绑定在显示组件 UserShow 上，添加用户事件绑定在添加的组件 UserAdd 上

getInitialState() 方法根据 LocalStorage 中的用户信息设置用户列表数据

LocalStorage 的 key 用 LocalStorage.key(index) 获取

handleChange 方法时刻跟着 userlist 的改变而变化

UserShow 显示组件

用户信息用对象 item 存储，可以将 item 设置为属性，从而给子组件 UserItem 调用，组件属性可以接受任何值。对于父组件管理的数据，也是设置为组件属性可以给子组件调用。

当用到 map 时，说明组件的 user 属性设置成了数组类型，使得遍历起来很方便。

data-key 属性中的序号是为了在删除的时候能够快速找到数组中需要删除的对象，运用数组的 API 进行删除。

通过 event.target 得到触发事件的节点

data-item 存储用户名，方便移除 LocalStorage 中的 item

UserItem 为 UserShow 的子组件，显示用户详细信息

点击显示用户详细信息

通过 this.props.item 获得用户信息

UserAdd 分为几部分介绍

首先介绍 render 方法返回的 HTML 模板，可以通过 id className ref属性 查找到 DOM 节点

然后是 button 的 onClick 事件绑定

首先定义存放用户信息的对象，通过获取表单元素的 value 将用户信息放到 item 对象中

可以仅获取表单 form 的 DOM 节点，通过 id 获得表单元素节点

trim() 为去除字符串前后空格

接下来是表单验证，并且显示相应的提示信息

将用户信息写入 LocalStorage，加入用户列表

LocalStorage 中的 key 为用户名，通过用户名是否重复查找是否重复添加用户

用 this.props.onAdd() 调用回调函数

最后 reset 表单