1、JSX语法
- 有助于防止XSS，因为ReactDom在呈现之前，会转义JSX中嵌入的任何值，所以不会注入未在程序中编写的任何内容。
- Babel会将JSX转换为语法转换成对象（使用React.createElement）
2、渲染元素
- ReactDom.render(元素,doucument.getElementById('root'));
- react元素是不可变的，通过有状态组件（见下文）时元素可变化。
- 只跟该内容变化的元素（虚拟Dom，Dom diff算法）
3、组件
- 无状态组件：纯函数，不更改传入的值（返回一个新的值），相同输入返回相同结果。
- 状态组件：也叫类组件，拥有render函数，拥有生命周期，拥有state状态
- 讲讲官网状态组件栗子：官网如何实现一个定时器状态组件，首先注意react元素是不可变的，所以需要把组件设置为一个类组件（状态组件）
1、在constructor中定义this.state
2、定义tick函数，tick函数内调用setState更改this.state（state不可以直接修改，必须调用setState修改哦！否则不会更新页面，还有setState可能是异步的（一致性，性能更优），他会将所有需要更改的state放入一个队列中，不会立即更新，所以不可以依赖他们的值来计算下一个状态）
3、在生命周期函componentDidMount循环调用tick函数。state一旦改变，组件就会重新调用render生命周期函数渲染更新页面
4、事件
- react触发事件1：触发事件时如果使用onClick = {this.handleSome}。要在constructor中bind绑定this
- react触发事件2：触发事件直接使用箭头函数onClick = {()=>this.handleSome}
- 条件渲染：流程就是出发函数a，在函数a内调用setState改变state的布尔值
5、列表
- 使用map方法快速建立列表
list = arr.map((number) =>
<li> key={number.toString()}>
{number}
</li>
)
必须注意注意注意：key必备（如果你希望你的程序更加优化），设置key的目的是为了性能更好，就像哈希表，为每个元素设置唯一的键，更好的diff算法
6、受控组件和非受控组件
- 受控组件：（官方解释）其值由React这样控制的输入表单元素(保存自己的状态或根据用户的输入更新，如input,textarea,select)称为“受控组件”。
7、生命周期
面试组件必考的就是生命周期，所以。。。。
react16.8+的生命周期分为三个阶段。挂载阶段，更新阶段，卸载阶段
挂载阶段：
- constructor：构造函数，最先执行，我们常常会在组件中的构造函数中初始化state，绑定this。
- getDerivedStateFromProps
- render
- componentDidMount:组件已经装在，可以操作dom，要记住在conponentwillUnmount中取消事件。进行异步请求的推荐位置。
更新阶段：
- getDerivedStateFromProps
- shouldComponentUpdate:更新state
- render
- getSnapshotBeforeUpdate:
- componentDidUpdate:已更新
卸载阶段：
- componentWillUnmount
setState同步还是异步？
- setState异步只是表现为异步，他的执行过程是同步的，可是合成事件和钩子函数的调用顺序实在更新之前，而setState更新是在shouldComponentUpdate，是在更新时，导致合成事件和钩子函数无法立刻拿到更新值，所以表现为异步。
- setState的更新也是批量更新，如果对一个值进行多次setState，会执行最后一次，而不实时更新，批量更新也是为了保证更好的性能。
8、key
- 开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。
9、refs
- Refs 是 React 提供给我们的安全访问 DOM元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：
class CustomForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}
10、redux
*最大特点是数据的"单向流动"。
-
用户访问 View
-
View 发出用户的 Action
-
Dispatcher 收到 Action，要求 Store 进行相应的更新
-
Store 更新后，发出一个"change"事件
-
View 收到"change"事件后，更新页面
11、受控组件和非受控组件
- 区别就是表单数据是由谁控制的，react控制就是受控组件，dom控制就是非受控组件
