元素的渲染
-
什么是 React 元素
元素是构成 React 应用的最小单位，用 ReactDOM.reader() 方法渲染。
元素是普通的 js 对象，是构成组件的一个部分。
-
创建 React 元素
使用 JSX 语法：
const element = <h1>Hello, world</h1>;，JSX 语法是用 React.createElement() 来构建 React 元素的。React.createElement()，接受三个参数：1. 可以是一个标签名（如div、span、或 React 组件）；2. 为传入的属性；3. 组件的子组件。React.cloneElement()，与 React.createElement() 相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件；新添加的属性会并入原有属性，同属性名新的会替换旧的，传入到返回的新元素中。 -
渲染 React 元素到 DOM
渲染粗略过程：React元素描述的是 虚拟DOM的结构，React会根据虚拟DOM渲染出页面的真实DOM。
渲染详细过程：1. 先调用 React.createElement() 编译成上面的 js 对象（也就是虚拟DOM节点）；2. 然后再调用 ReactDOMComponent( vdom).mountComponent() 将虚拟DOM变成真实的DOM；3. 最后用 appendChild( domNode ) 插入DOM树，显示出来。
-
更新已渲染的元素
React 元素是不可变的，我们一旦创建了一个元素，就不能再修改其子元素或任何属性，因此我们更新 UI 的唯一方法就是创建一个新的元素，并将其传入 ReactDOM.render() 方法中。
只更新必须要更新的部分
JSX 简介
JSX 是 一种 JavaScript 的语法扩展，运用于 React 架构中，它是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面。
JSX就是 Javascript 和 XML 结合的一种格式，React 发明了 JSX，利用HTML语法来创建虚拟DOM。当遇到 <，JSX就当HTML解析，遇到 { 就当 JavaScript 解析。
注意：大括号里是 JavaScript，不要加引号，加引号就会被当成字符串。
组件 & Props
组件可以将UI切分成一些独立的、可复用的部件，这样就只需专注于构建每一个单独的部件了。
-
定义组件
函数定义组件（JavaScript函数）
ES6 class 定义组件
自定义组件（组件名称必须以大写字母开头）
-
组件渲染（组件名必须大写字母开头）
将组件作为React元素，标签的属性作为props键值。
-
组合组件（返回值只能有一个根元素）
组合组件它可以在输出中引用其他组件，在 React 应用中，按钮、表单、对话框以及整个屏幕的内容都可被表示为组件。
-
提取组件
可以将组件切分为更小的组件。
-
Props 的只读性
无论是使用函数或是类来声明一个组件，它都不能修改它自己的props值。
state & 生命周期
修改 state 时使用 setState()。
-
将函数转换为类
创建扩展名为 React.Component 的ES6类
创建 render() 空方法
将函数体移动到 render() 方法中
在 render() 方法中使用 this.props 替换 props
-
为一个类添加局部状态
在
render()方法中使用this.state.date替代this.props.date添加一个类构造函数来初始化状态 this.state
从
<Clock />元素移除date属性
-
将生命周期方法添加到类中
当
<Clock />被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数；React 然后调用
Clock组件的render()方法；当
Clock的输出插入到 DOM 中时，React 调用componentDidMount()生命周期钩子；浏览器每秒钟调用
tick()方法；一旦
Clock组件被从DOM中移除，React会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。
-
正确地使用状态
关于 setState() ：
不能直接更新状态，应当使用
setState()；更新状态可能是异步的，构造函数是唯一能够初始化 this.state 的地方；
状态更新合并（浅合并），当更新一个状态时，其他的状态保持不变。
-
数据单向流动
从父节点传递到子节点，因为组件是简单并且易于把握的，我们只需要从父节点获取props渲染即可，如果顶层组件的某个props改变了，那么 React 会递归的向下遍历整棵组件树，重新渲染所有使用这个属性的组件。
事件处理
-
语法差异
React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法我们需要传入一个函数作为事件处理函数，而不是一个字符串。
return false;不会阻止组件的默认行为，需要调用e.preventDefault();
尽量不要使用 addEventListener
-
绑定事件处理函数的 this
通过 bind 方法，原地绑定事件处理函数的 this 指向（特点：书写简单，但是每次渲染都会执行生成一个新函数）
通过一个箭头函数将真实的事件处理函数包装（特点：能清晰描述事件处理函数接收的参数列表）
在 constructor 中预先将所有的事件处理函数通过 bind 方法进行绑定（特点：解决了前两种方法的额外开销和重新渲染的问题，但是书写有点复杂）
使用类成员字段定义语法（特点：解决了上述三种问题，唯一的就是它还没被正式纳入 ES5 规范中）
表单（Forms）
HTML 表单元素与 React 中的其他DOM元素有所不同，因为表单元素生来就保留了一些内部状态。
-
用value实现受控组件
< input type=”text”/><textarea>，通过它的子节点定义了它的文本值<select>，创建下拉列表
file input 标签
处理多个输入元素
-
受控 input 组件的 null 值
在受控组件上指定值 prop 可防止用户更改输入，如果我们指定了一个 value，但是输入的值却仍然是可以编辑的，那么可能会以外的把 value 设置为 undefined 或者是 null。
CSS 和 SASS
CSS
-
内联样式：使用内联样式属性设置元素样式，值必须是JavaScript对象。
camelCased属性名称：由于内联CSS是用JavaScript对象
background-color编写的，因此必须使用camel case语法编写具有两个名称的属性。JavaScript 对象：使用样式信息创建对象，并在style属性中引用它。
-
CSS 样式表
- 在单独的文件中编写CSS样式，只需使用
.css文件扩展名保存 文件，然后将其导入应用程序。
- 在单独的文件中编写CSS样式，只需使用
-
CSS 模块
- 向应用程序添加样式的另一种方法是使用CSS模块，它便于放置在单独文件中的组件。
Sass
- Sass是一款CSS预处理器，它的文件在服务器上执行，并将 CSS 发送到浏览器。
条件渲染
React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。
if 语句，在React中使用if语句条件渲染是最简单的，if... else 是最基本的条件渲染方式，用 if 从渲染方法中返回null提前退出函数 。
三元操作符，两种模式（edit，view），它使条件渲染更加的简洁,使得代码可以采用内联(inline)的方式表达出来。
逻辑 && 操作符，不返回元素就返回null时使用。
switch... case 语句，比较冗长，可以通过立即调用函数内联使用。
枚举（enums），使用多种条件渲染最好的方式是枚举，在javascript中，对象的键值对可以用作枚举。
多层条件渲染，也被叫做嵌套条件渲染。
使用高阶组件（HOCs）， 使用高阶组件而屏蔽条件渲染，它的一种使用方式就是改变组件的外观，组件能关注主要的逻辑目的 。
列表 & Keys
Keys 可以在DOM中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。
-
列表（Lists）
多组件渲染
基本列表组件
-
键（Keys）- 帮助 React 标识哪个项被修改、添加或者移除了
使用 keys 提取组件，keys 只在数组的上下文中存在意义。
在数组中使用的 keys 在同辈元素中必须是唯一的。
keys 的内部性，键是React的一个内部映射，但其不会传递给组件的内部。
React 理念
React 最初的目的是使用 JavaScript 创建大型的，快速响应的网络应用。
React 的众多优点之一是它让我们在编写代码的时候同时也在思考我们的应用。
我们需要了解的五大核心概念有：
组件
JSX
Props & State
组件 API
组件类型
使用 PropTypes 检查类型
React 组件参数类型的验证。
高阶组件
高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。也就是说，高阶组件是参数为组件，返回值为新组件的函数。
