React基础梳理，万字总结，总能帮到你~

第1章：React入门

1.1.React简介

1.英文官网: reactjs.org/
2.中文官网: react.docschina.org/
3.用于动态构建用户界面的 JavaScript 库(只关注于视图)
4.Facebook开源

React的特点

1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）

React高效的原因

1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。

1.2.React的基本使用

创建虚拟DOM的两种方式

1.纯JS方式(一般不用)
2.JSX方式

虚拟DOM与真实DOM

1.通过一些API来创建一种 “特别” 的一般js对象，例如：const VDOM = React.createElement('xx',{id:'xx'},'xx')，这就是一个简单的虚拟DOM对象
2.虚拟DOM对象最终都会被React转换为真实的DOM。我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

1.3.React JSX

JSX

1.全称: JavaScript XML
2.react定义的一种类似于XML的JS扩展语法: React.createElement(component, props, …children)方法的语法糖
3.作用: 用来简化创建虚拟DOM
4.标签名任意: HTML标签或其它标签
5.标签属性任意: HTML标签属性或其它
6.基本语法规则：1.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析2.遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
7.babel.js的作用1.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行2.只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

渲染虚拟DOM(元素)

1.语法: ReactDOM.render(virtualDOM, containerDOM)
2.作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3.参数说明：1.参数一: 纯js或jsx创建的虚拟dom对象2.参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

1.2.模块与组件、模块化与组件化的理解

模块和模块化

1.理解：向外提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块？随着业务逻辑增加，代码越来越多且复杂。
3.作用 —— 复用js, 简化js的编写, 提高js运行效率
4.当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件和组件化

1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件？一个界面的功能更复杂
3.作用 —— 复用编码, 简化项目编码, 提高运行效率
4.当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

第2章：React面向组件编程

2.1 组件三大核心属性之 —— state

1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

强烈注意

1.组件中render方法中的this为组件实例对象
2.组件自定义的方法中this为undefined，如何解决？1.强制绑定this: 通过函数对象的bind()2.箭头函数
3.状态数据，不能直接修改或更新

2.2 组件三大核心属性之 —— props

1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.通过标签属性从组件外向组件内传递变化的数据
4.注意 —— 组件内部无法修改props数据

对props中的属性值进行类型限制和必要性限制

// 第一种方式（React v15.5 开始已弃用）
Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

// 第二种方式 —— 使用prop-types库进限制（需要引入prop-types库）
class Person extends React.Component{render(){const {name,age,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age+1}</li></ul>)}
}
//对标签属性进行类型、必要性的限制
Person.propTypes = {name:PropTypes.string.isRequired, //限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值 
Person.defaultProps = {sex:'男',//sex默认值为男age:18 //age默认值为18
}
ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('root'))

2.3 组件三大核心属性之 —— refs与事件处理

ref —— 组件内的标签可以定义ref属性来标识自己：

1.字符串形式的ref：

<input ref="input1"/>

2.回调形式的ref:

<input ref={(val)=>{this.input1 = val}}/>

3.createRef创建ref容器:

myRef = React.createRef() 
<input ref={this.myRef}/>

事件处理

1.通过onXxx属性(例如：onClick)指定事件处理函数(注意大小写)* 1.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件* 2.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2.通过event.target得到发生事件的DOM元素对象

受控组件和非受控组件

React 中的受控组件和非受控组件都是针对于表单数据而言的。React 推荐使用受控组件来处理表单数据。在受控组件中，表单数据由React组件的state管理。在非受控组件中，表单数据交由DOM节点处理，可以使用ref来从 DOM中获取表单数据。

// 受控组件 —— React 的 state 是表单的数据源，并且渲染表单的 React 组件还控制着用户输入过程中表单发生的操作
function Form() {const [name, setName] = useState('');const onInputChange = event => setName(event.target.value);const onFormSubmit = event => {console.log('提交的数据 => ', name);event.preventDefault();};return (<form onSubmit={onFormSubmit}><label>名字：<input type='text' value={name} onChange={onInputChange} /></label><input type='submit' value='提交'/></form>)
}

// 非受控组件 —— 表单元素自己维护 state。可以使用 ref 获取表单数据
function Form() {const inputElement = useRef(null);const onFormSubmit = event => {console.log('提交的数据 => ', inputElement.current.value);event.preventDefault();};return (<form onSubmit={onFormSubmit}><label>名字：<input type='text' ref={inputElement} /></label><input type='submit' value='提交'/></form>)
}

2.4 组件的生命周期

理解 React 的生命周期

1.组件从创建到死亡它会经历一些特定的阶段。
2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

生命周期流程图(旧)

1.初始化阶段: 由ReactDOM.render()触发—初次渲染* 1.constructor()* 2.componentWillMount()* 3.render()* 4.componentDidMount()
2.更新阶段: 由组件内部this.setSate()或父组件重新render触发* 1.shouldComponentUpdate()* 2.componentWillUpdate()* 3.render()* 4.componentDidUpdate()
3.卸载组件: 由ReactDOM.unmountComponentAtNode()触发* 1.componentWillUnmount()

生命周期流程图(新)

1.初始化阶段: 由ReactDOM.render()触发—初次渲染* 1.constructor()* 2.getDerivedStateFromProps* 3.render()* 4.componentDidMount()
2.更新阶段: 由组件内部this.setSate()或父组件重新render触发* 1.getDerivedStateFromProps* 2.shouldComponentUpdate()* 3.render()* 4.getSnapshotBeforeUpdate* 5.componentDidUpdate()
3.卸载组件: 由ReactDOM.unmountComponentAtNode()触发* 1.componentWillUnmount()

2.5 虚拟DOM与DOM Diffing算法

第3章：基于脚手架的react应用

3.1 使用create-react-app创建react应用

第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

// react脚手架项目结构
public ---- 静态资源文件夹favicon.icon ------ 网站页签图标index.html -------- 主页面logo192.png ------- logo图logo512.png ------- logo图manifest.json ----- 应用加壳的配置文件robots.txt -------- 爬虫协议文件
src ---- 源码文件夹App.css -------- App组件的样式App.js --------- App组件App.test.js ---- 用于给App做测试index.css ------ 样式index.js ------- 入口文件logo.svg ------- logo图reportWebVitals.js--- 页面性能分析文件(需要web-vitals库的支持)setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)

3.2 功能界面的组件化编码流程（通用）

1.拆分组件: 拆分界面,抽取组件
2.实现静态组件: 使用组件实现静态页面效果
3.实现动态组件* 3.1 动态显示初始化数据* 3.1.1 数据类型* 3.1.2 数据名称* 3.1.2 保存在哪个组件?* 3.2 交互(从绑定事件监听开始)

3.3 react脚手架配置代理

1.第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js

2.编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')

module.exports = function(app) {app.use(proxy('/api1', {//api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000	changeOrigin默认值为false，但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/api2', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/api2': ''}}))
}

4. React路由

4.1 SPA的理解

1.单页Web应用（single page web application，SPA）。
2.整个应用只有一个完整的页面。
3.点击页面中的链接不会刷新页面，只会做页面的局部更新。
4.数据都需要通过ajax请求获取, 并在前端异步展现。

4.2 路由的理解

1.什么是路由?2.一个路由就是一个映射关系(key:value)3.key为路径, value可能是function或component4.路由分类
2.后端路由：1.理解： value是function, 用来处理客户端提交的请求。2.注册路由： router.get(path, function(req, res))3.工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
3.前端路由：1.浏览器端路由，value是component，用于展示页面内容。2.注册路由: <Route path="/test" component={Test}>3.工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

4.3 React 路由使用

react-router-dom是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：

# npm
npm install react-router-dom
# yarn
yarn add react-router-dom

混合组件化

index => home => main/about/topics

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './pages/route-demo/home';
ReactDOM.render(<Home />, document.getElementById('root'));

// route-demo/home
import React, { Component } from 'react';
import { HashRouter, Route, Link, Switch } from 'react-router-dom';
import Main from './main'
import About from './about'
import Topics from './topics'
class Home extends Component {constructor(props) {super(props);this.state = {}}render() {return (<HashRouter>{/* HashRouter里面一定要有一个根节点，不能直接写Route */}<div><ul><li><Link to="/">Home</Link></li><li><Link to="/about">about</Link></li><li><Link to="/topics">topics</Link></li></ul><hr />{/* exact 精准匹配 */}<Route exact path="/" component={Main}></Route><Route path="/about" component={About}></Route><Route path="/topics" component={Topics}></Route></div></HashRouter>);}
}
export default Home;

路由配置化

路由配置化：把路由单独抽取出来，不和link写在一起
this.props.children 表示组件所有的子节点。
index => router => home => admin/about/contact

// router.js
class IRouter extends Component {constructor(props) {super(props);this.state = {}}render() {return (<BrowserRouter><Home><Route exact path='/' component={Admin} /><Route path='/about' component={About} /><Route path='/contact' component={Contact} /></Home></BrowserRouter>);}
}
export default IRouter;

// home.js
class Home extends Component {render() {return (<div><ul><li><Link to='/'>Home</Link></li><li><Link to='/about'>About Us</Link></li><li><Link to='/contact'>Contact Us</Link></li></ul><hr />{this.props.children}</div>)}
}
export default Home;

嵌套路由

一级路由 index => router => home => admin/about/contact
二级路由 admin => 公司/文化/员工

// home.js
class Home extends Component {render() {return (<div><ul><li><Link to='/admin'>Home</Link></li><li><Link to='/about'>About Us</Link></li><li><Link to='/contact'>Contact Us</Link></li></ul><hr />{this.props.children}</div>)}
}
export default Home;

//router.js
class IRouter extends Component {constructor(props) {super(props);this.state = {}}render() {return (<BrowserRouter><Home>{/* 嵌套路由不用写component 写render 继续渲染下一级路由 */}{/* 嵌套路由 不能加exact否则不能匹配到`/admin` 只能精准匹配到`/` */}<Route path='/admin' render={()=><Admin><Route path='/admin/company' component={About} /><Route path='/admin/culture' component={About} /><Route path='/admin/people' component={About} /></Admin>} /><Route path='/about' component={About} /><Route path='/contact' component={Contact} /></Home></BrowserRouter>);}
}
export default IRouter;

// admin.js
class Admin extends Component {render() {return (<div>This is Admin Page.<ul><li><Link to='/admin/company'>公司</Link></li><li><Link to='/admin/culture'>文化</Link></li><li><Link to='/admin/people'>员工</Link></li></ul><hr />{this.props.children}</div>);}
}
export default Admin;

5. redux

redux是什么

1.redux是一个专门用于做状态管理的JS库(不是react插件库)。
2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3.作用 —— 集中式管理react应用中多个组件共享的状态。

什么情况下需要使用redux

1.某个组件的状态，需要让其他组件可以随时拿到（共享）。
2.一个组件需要改变另一个组件的状态（通信）。
3.总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

5.1 redux的三个核心概念

action

1.动作的对象
2.包含2个属性* type：标识属性, 值为字符串, 唯一, 必要属性* data：数据属性, 值类型任意, 可选属性
3.例子：{ type: 'ADD_STUDENT', data : {name: 'tom',age:18} }

reducer

1.用于初始化状态、加工状态。
2.加工时，根据旧的state和action，产生新的state的纯函数。

store

1.将state、action、reducer联系在一起的对象
2.如何得到此对象?* 1.import {createStore} from ‘redux’* 2.import reducer from ‘./reducers’* 3.const store = createStore(reducer)
3.此对象的功能?* 1.getState(): 得到state* 2.dispatch(action): 分发action, 触发reducer调用, 产生新的state* 3.subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

5.2 redux的核心API

createstore()

作用：创建包含指定reducer的store对象

store对象

1.作用: redux库最核心的管理对象
2.它内部维护着:* 1)state* 2)reducer
3.核心方法:* 1)getState()* 2)dispatch(action)* 3)subscribe(listener)
4.具体编码:* 1)store.getState()* 2)store.dispatch({type:‘INCREMENT’, number})* 3)store.subscribe(render)

applyMiddleware()

作用：应用上基于redux的中间件(插件库)

combineReducers()

作用：合并多个reducer函数

5.3 redux 用法示例

1.在src 目录下新建redux 文件目录，新建核心文件 store.js

import { createStore , combineReducers} from 'redux';
import countReducer from './count_reducer';
import colorReducer from './color_reducer';

// 使用该方法合并两个reducer
const rootReducer = combineReducers({countReducer,colorReducer
});

const store = createStore(rootReducer);

export default store;

2.实现一个简单的加、减法的求和计算器：

import React, { Component } from 'react'
import store from '../redux/store';

export class Count extends Component {constructor(props) {super(props);this.state = {count: 0};}componentDidMount() {store.subscribe(() => {this.setState({});})}increment = ()=> {const {value} = this.selectNumber;store.dispatch({type: 'increment', data: Number(value)});}decrement = ()=> {const {value} = this.selectNumber;store.dispatch({type: 'decrement', data: Number(value)});}incrementIfOdd = ()=> {const {value} = this.selectNumber;const count = store.getState().countReducer;if(count % 2 !== 0) {store.dispatch({type: 'increment', data: Number(value)});}}incrementAsync = ()=> {setTimeout(() => {const {value} = this.selectNumber;store.dispatch({type: 'increment', data: Number(value)});}, 500)}render() {return (<div><h1>当前求和为： {store.getState().countReducer}</h1><select ref={val => this.selectNumber = val} style={{width: '50px'}}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.increment}>+</button>&nbsp;<button onClick={this.decrement}>-</button>&nbsp;<button onClick={this.incrementIfOdd}>求和为奇数再加</button>&nbsp;<button onClick={this.incrementAsync}>异步求和</button>&nbsp;</div>)}
}

export default Count

3.在redux 目录下新建 count 的reducer —— count_reducer.js

/**
 * 创建一个为组件count 服务的reducer
 */
const initState = 0;
export default function countReducer(prestate = initState, action) {const {type, data} = action;console.log(action);switch(type) {case 'increment': return prestate + data;case 'decrement': return prestate - data;default: return initState;}
}

第6章：react的扩展核心知识

6.1. setState

setState更新状态的2种写法

(1). setState(stateChange, [callback])------对象式的setState1.stateChange为状态改变对象(该对象可以体现出状态的更改)2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

(2). setState(updater, [callback])------函数式的setState1.updater为返回stateChange对象的函数。2.updater可以接收到state和props。4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:

1.对象式的setState是函数式的setState的简写方式 (语法糖)
2.使用原则：* (1).如果新状态不依赖于原状态 ===> 使用对象方式* (2).如果新状态依赖于原状态 ===> 使用函数方式* (3).如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取

6.2. lazyLoad

路由组件的lazyLoad

// 1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))

// 2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}><Switch><Route path="/xxx" component={Xxxx}/><Redirect to="/login"/></Switch>
</Suspense>

6.3. Hooks

6.3.1. React Hook/Hooks是什么?

(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

6.3.2. State Hook

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)(3). useState() 说明:参数: 第一次初始化指定的值在内部作缓存返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx() 2种写法:setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

6.3.3. Effect Hook

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:发ajax请求数据获取设置订阅 / 启动定时器手动更改真实DOM
(3). 语法和说明: useEffect(() => { // 在此可以执行任何带副作用操作return () => { // 在组件卸载前执行// 在此做一些收尾工作, 比如清除定时器/取消订阅等}}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行(4). 可以把 useEffect Hook 看做如下三个函数的组合componentDidMount()componentDidUpdate()	componentWillUnmount()

6.3.4. Ref Hook

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样

6.4. Context

理解

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信，常用于解决跨多层父子组件间的数据交互问题。

使用

1) 创建Context容器对象：
	const XxxContext = React.createContext()	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	<xxxContext.Provider value={数据}>
		子组件</xxxContext.Provider>3) 后代组件读取数据：

//第一种方式:仅适用于类组件 static contextType = xxxContext// 声明接收contextthis.context // 读取context中的value数据
	//第二种方式: 函数组件与类组件都可以<xxxContext.Consumer>{value => ( // value就是context中的value数据要显示的内容)}</xxxContext.Consumer>

注意

在应用开发中一般不用context, 一般都用它的封装react插件

Context 的使用作用可以对比 vue的 provider/inject：

// 父组件 provide 中提供变量，子组件 inject 中来注入，然后可以在子组件内部使用 provide 的变量

// Father.vue
provide(){ return { demo: this.demoFn， }}
......
methods:{demoFn(){this.flag = falsethis.$nextTick(function(){this.flag = true})}
}

// child.vue
...
inject: ['demo']
...
通过inject引入后直接调用 `this.demo()` 即可

6.5. 组件优化

Component的2个问题

1.只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
2.只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==>效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1: 重写shouldComponentUpdate()方法比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:使用PureComponent PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true 注意: 只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false不要直接修改state数据, 而是要产生新数据项目中一般使用PureComponent来优化

6.6. render props

如何向组件内部动态传入带内容的结构(标签)?

Vue中:

1.使用slot技术, 也就是通过组件标签体传入结构

React中:

1.使用children props: 通过组件标签体传入结构
2.使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A><B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到

render props

<A render={(data) => <C data={data}></C>}>
</A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}

6.7. 组件通信方式总结

组件间的关系：

父子组件
兄弟组件（非嵌套组件）
祖孙组件（跨级组件）

几种通信方式：

1.props：(1).children props(2).render props
2.消息订阅-发布：pubs-sub、event等等
3.集中式管理：redux、dva等等
4.conText:生产者-消费者模式

比较好的搭配方式：

父子组件：props
兄弟组件：消息订阅-发布、集中式管理
祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享