react基础

简介

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 转发