共计 3223 个字符，预计需要花费 9 分钟才能阅读完成。
react 基础
JSX
- JSX 是一个 JavaScript 的语法扩展, 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
- React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。
- JSX 里的 class 变成了 className
元素
- 元素是构成 React 应用的最小砖块。
- React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
- 组件是由元素构成的。
组件
组件名称必须以大写字母开头(React 会将以小写字母开头的组件视为原生 DOM 标签)
- 函数组件：
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}- class 组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;
}
}props
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为“props”。组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props
// 这段代码会在页面上渲染“Hello, Sara”function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
// 上段代码渲染时发生了什么：1. 我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 作为参数。2. React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。3. Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。4. React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。State
- 使用
this.setState()设置 state 的值 -
this.setState()可能是异步的 - 调用
this.setState()的时候，React 会把你提供的对象合并到当前的 state。
数据流
react是单向数据流，任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
生命周期
在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用，并且也引入了新的 2 个 API 来解决问题。（Fiber 本质上是一个虚拟的堆栈帧，新的调度器会按照优先级自由调度这些帧，从而将之前的同步渲染改成了异步渲染，在不影响体验的情况下去分段计算更新。在之前的版本中，如果你拥有一个很复杂的复合组件，然后改动了最上层组件的 state，那么调用栈可能会很长，调用栈过长，再加上中间进行了复杂的操作，就可能导致长时间阻塞主线程，带来不好的用户体验。Fiber 就是为了解决该问题而生。）
class ExampleComponent extends React.Component {
// 用于初始化 state
constructor(props) {super(props)
this.state = {hasError: false};
}
// 用于替换 `componentWillReceiveProps`，该函数会在初始化和 `update` 时被调用
// 因为该函数是静态函数，所以取不到 `this`
// 如果需要对比 `prevProps` 需要单独在 `state` 中维护
static getDerivedStateFromProps(nextProps, prevState) {}
// 判断是否需要更新组件，多用于组件性能优化
shouldComponentUpdate(nextProps, nextState) {}
// 组件挂载后调用
// 可以在该函数中进行请求或者订阅
componentDidMount() {}
// 用于替换 componentWillUpdate，该函数会在 update 后 DOM 更新前被调用
// 用于读取最新的 DOM 数据。getSnapshotBeforeUpdate() {}
// 组件即将销毁
// 可以在此处移除订阅，定时器等等
componentWillUnmount() {}
// 组件销毁后调用
componentDidUnMount() {}
// 组件更新后调用
componentDidUpdate() {}
// 错误边界 - 渲染备用 UI
// 更新 state 使下一次渲染能够显示降级后的 UI
// 注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误
static getDerivedStateFromError(error) {return { hasError: true};
}
// 错误边界 - 打印错误信息
// 你同样可以将错误日志上报给服务器
// 注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误
componentDidCatch(error, info) {console.log(error, info);
}
// 渲染组件函数
render() {}
// 以下函数不建议使用
UNSAFE_componentWillMount() {}
UNSAFE_componentWillUpdate(nextProps, nextState) {}
UNSAFE_componentWillReceiveProps(nextProps) {}}对于异步渲染，现在渲染有两个阶段：reconciliation 和 commit。前者过程是可以打断的，后者不能暂停，会一直更新界面直到完成。
-
Reconciliation 阶段：
- componentWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
-
Commit 阶段：
- componentDidMount
- componentDidUpdate
- componentWillUnmount
因为 reconciliation 阶段是可以被打断的，所以 reconciliation 阶段会执行的生命周期函数就可能会出现调用多次的情况，从而引起 Bug。所以对于 reconciliation 阶段调用的几个函数，除了 shouldComponentUpdate 以外，其他都应该避免去使用。
事件处理
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
为 JSX 内时间绑定 this 的几种方式：
- constructor 内处理：
constructor() {this.handleClick = this.handleClick.bind(this);
}- JSX 内使用 bind:
<button onClick={this.handleClick.bind(this, id)}>Delete Row</button>- 箭头函数：
<button onClick={() => this.handleClick(id)}>Delete Row</button>key
key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
key 只是在兄弟节点之间必须唯一
受控组件
使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做 受控组件。
进阶
redux-adcanve
原文 git 地址 觉得有用的话，来个 star 鼓励，持续更新中。