react基础 - myfe/training-camp GitHub Wiki
React 起源于 Facebook 的内部项目。作为目前前端开发的主流工具，在项目中有着广泛的应用。 React 中文文档 Git仓库
基本使用
// index.html
<div id="app"></div>
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
const element = <div>'Hello React'</div>;
ReactDOM.render(element, document.getElementById('app'));
| 概念 | 学习要求 | 相关链接 |
|---|---|---|
| 组件 & Props | 理解Props的概念，熟悉class组件和函数式组件的用法 | 组件 & Props |
| State & 生命周期 | 理解State的概念，熟悉常用生命周期，例如render，constructor，componentDidMount，componentDidUpdate等 | 生命周期 - 文档 、生命周期 - 图谱 |
| 状态提升 | 结合Props和State，理解自上而下的数据流，如何更好的处理在多个组件中传递数据的逻辑 | 状态提升 |
| 事件处理 | 理解JSX中事件的语法。理解class组件中事件回调函数中this的用法 | 事件处理 |
| 列表 & Key | 理解JSX如何渲染列表和Key的意义 | 列表 & Key |
| 组合 vs 继承 | 理解如何通过组合和继承实现组件复用 | 组合 vs 继承 |
| 概念 | 学习要求 | 相关链接 |
|---|---|---|
| Context | 理解Context的定义。哪些场景该使用Context，是否有必要使用Context | Context |
| 错误边界 | 理解错误边界的作用，有哪些场景无法使用错误边界 | 错误边界 – React |
| Fragments | 了解Fragments的用法 | Fragments – React |
| 高阶组件 | 理解高阶组件设计模式，如何使用高阶组件复用组件逻辑 | 高阶组件 – React |
| 受控组件 & 非受控组件 | 理解二者的区别和使用场景 | 受控组件 、 非受控组件 |
| Hook | 理解Hook的定义，Hook与class组件的差异。了解React提供的Hook和自定义Hook | React Hook |
| Virtual DOM | 理解概念，如何减少渲染开销 | Virtual DOM 及内核 – React |
| diff算法 | 虚拟DOM的加速器，提升React性能 | 协调 – React |
| 概念 | 学习要求 | 相关链接 |
|---|---|---|
| Context | 理解Context的定义。哪些场景该使用Context，是否有必要使用Context | Context |
| Refs | 获取DOM元素或React节点，了解适用场景 | Refs & DOM 、Refs 转发 |