这是我参与「第四届青训营 」笔记创作活动的的第9天
平时做项目用的都是vue，今天终于开始了React的学习！
React是什么
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
函数组件与class组件
函数组件
函数组件本质就是js函数，它接收唯一带有数据的props对象并返回一个React元素
class组件
也可以使用es6的class定义组件，定义class组件需要继承React.Component
将函数组件转换成class组件
- 创建同名的class，并且继承React.Component
- 添加render()方法
- 将函数体移到render()方法中
- 用this.props替换render()中的props
- 删除空余的空函数声明
render()
React.Component的子类有必须定义的render()函数，所以render()方法是class组件中唯一必须实现的方法，用于元素渲染
render被调用时会检查this.props和this.state的变化并返回以下类型之一:
- React元素，通过JSX创建，如
<div/>会被渲染为DOM节点，<Test/>会被渲染为自定义组件，<div/>和<Test/>都是React元素 - 数组或fragments,使render方法可以返回多个元素
- Portals,可以渲染子节点到不同的DOM子树中
- 字符串或数值类型,在DOM会被渲染为文本节点
- 布尔类型或null，用于支持条件渲染，比如true && expression，expression会被渲染，如果是false && expression,React会忽略并跳过它
JSX
JSX是js的语法扩展，可以生成React元素，元素继而渲染为 DOM
React认为渲染逻辑本质与其他UI逻辑内在耦合，而JSX 可以很好地描述UI应该呈现出它应有交互的本质形式，所以建议在React中配合使用JSX
JSX可以使用引号将属性值指定为字符串字面量
JSX可以使用大括号在属性值中插入js表达式
JSX也是一个表达式，所以可以将JSX赋值给变量，也可以将JSX当作参数传入，以及从函数中返回JSX
因为React DOM在渲染所有输入内容之前默认会进行转义，所有的内容在渲染之前都被转换成了字符串，所以JSX可以防止注入攻击
列表和key
key可以帮助React识别列表中哪些元素改变了:每当一个列表重新渲染时，React 会根据每一项列表元素的 key 来检索上一次渲染时与每个 key 所匹配的列表项。如果 React 发现当前的列表有一个之前不存在的 key，那么就会创建出一个新的组件。如果 React 发现和之前对比少了一个 key，那么就会销毁之前对应的组件。如果一个组件的 key 发生了变化，这个组件会被销毁，然后使用新的 state 重新创建一份
最好选择此元素在列表中独一无二的字符串，不需要在全局都保证唯一，只需要在当前的同一级元素之前保证唯一
尽量不要使用元素索引index作为key，因为react框架使用虚拟DOM,每次更新都会产生新的虚拟DOM,然后使用diff算法和旧的虚拟DOM进行比较,有不同才会产生新的真实DOM渲染到页面中,这样就大大的提高了效率和性能。如果使用index作为key，当列表重新排序、新增、删除时，key值发生变化，会重新生成新的真实的DOM，消耗了性能
实例属性
props
props代表组件接收的参数。通过props的传递，数据从父组件流向子组件
state
state和props类似，但是state是组件的私有属性，完全受控于当前组件
状态提升
遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享
- 父组件添加构造函数，将子组件的state数据移至父组件的构造函数中赋初始值
- 利用prop的传递机制，将父组件的this.state.xx传递给子组件
- 将子组件原先的this.state.xx替换为this.props.xx
- 删去子组件的构造函数，因为原来的state由父组件保存
