代码分割
所谓代码分割，可以理解为打包文件的时候，将某些文件单独打包；
我们在使用webpack打包的时候，实际上已经使用了代码分割，比如将一些公共的代码抽离出来，变成一个文件，这样在下次打包的时候就不会对这部分不变的代码进行打包。
下面我们具体认识一下React中的代码分割。
在组件中引入其他模块
代码：
// 1. App.js
import React from 'react';
import './App.css';
import {add, substract} from './math'
function App() {
return (
<div className="App">
<h1> 3 + 5 + 7 = {add(3, 5, 7)}</h1>
<h1> 3 + 5 + 7 = {substract(3, 5)}</h1>
</div>
);
}
export default App;
// 2. math.js
export function add(...args) {
console.log('add...')
return args.reduce((v1, v2) => v1 + v2)
}
export function substract(v1, v2) {
console.log('substract...')
return v1 - v2
}
export function multiple(...args) {
console.log('multiple...')
return args.reduce((v1, v2) => v1 * v2)
}
export function divide(v1, v2) {
return v1 / v2
}
- 我们在我们的组件APP中引入了math.js中的两个方法add和substract；
- 我们使用CRA（Create-React-App）这个工具搭建的环境是集成webpack的，本身就拥有一些特殊的特性；
- 在开发环境下，math.js中的所有文件都被引入了；但是当我们打包之后，会发现真正引入的代码只有两个用到的函数；
- 这个原始代码中并没有使用代码分割，即所有的代码都会打包在一起，main.js是包含在主模块中的。
使用import()异步加载进行代码拆分
我们对上面的App.js代码进行改进
代码：
import React, { Component } from 'react';
import './App.css'
import { substract } from './math';
class App2 extends Component {
// 这里是一种简写，相当于this.state=state，省略了constructor
state = {
v1: '',
v2: ''
}
render() {
return (
<div className="App">
<h1>3 + 5 + 7 = {this.state.v1}</h1>
<h1>3 - 5 = {this.state.v2}</h1>
<button onClick={this.calculate.bind(this)}>开始计算</button>
</div>
)
}
calculate() {
import('./math').then(({add, sustract}) => {
this.setState({v1: add(3, 5, 7)})
this.setState({v2: substract(3, 5)})
})
}
}
export default App2;
- 上面代码注意的第一点，直接声明state就相当于写this.state = state，省略了constructor；
- 当按钮被点击的时候，会触发calculate事件，我们使用了异步加载，加载成功之后，会得到模块对象，我们拿到里面我们需要的函数在回调函数中调用；
- 异步加载在代码初始化的时候并没有加载math模块，当用户发请求的时候，才进行了模块请求，进行下一步的操作；
-
我们打开这个调试工具中的Network，当点击按钮之后，会出现这个math.js的请求；
image.png
image.png - 这样的写法本来是ES6的异步的import语法，webpack对其进行了处理，实现了代码的拆分，也就是math.js中的必要内容因为这种异步方式被抽离出来形成了一个单独的js加载进来。
- 总的来说，上面的步骤中包含了代码拆分和异步加载。
- webpack不会在开发环境的时候使Tree-shaking，而会在打包的时候使用这个，将没有关系的代码去除掉。
使用import()异步加载加载组件
上面的方式是使用import加载传统JS文件，我们能不能对组件进行异步加载呢？当我们需要的时候再去加载这个组件
代码：
// 1. Add.js
import React from 'react';
import {add} from './math';
export default function() {
return <h1>3 + 5 + 7 = {add(3, 5, 7)}</h1>
}
// 2. Substract.js
import React from 'react';
import {substract, Substract} from './math'
export default function() {
return <h1>3 - 5 = {substract(3, 5)}</h1>
}
// 3. App3.js
import React, { Component, Suspense } from 'react';
import App from './App';
import './App.css'
const Add = React.lazy(() => import('./Add'))
const Substract = React.lazy(() => import('./Substract'))
class App3 extends Component {
render() {
return (
<div className="App">
<Suspense fallback={<div>Loading...</div>}>
<Add></Add>
<Substract></Substract>
</Suspense>
</div>
)
}
}
export default App;
- 我们原先的模块进行拆分，拆分成Add模块和Subatract模块；
- 我们原先会在一开始的时候将这些数据 import 进来，这样会在最后打包到一起；
- 我们此处使用React.lazy()进行异步加载；
- 使用异步加载一般会跟Suspense一起使用，当还没加载出来的时候，会显示参数里面的Loading
Context（上下文）
如果给嵌套比较深的子组件传递一些东西的时候，React的单向数据流需要通过属性一层一层传递，这样子，每个组件的代码都比较冗余。
代码：
import React from 'react'
import './App.css'
const Button = (props) => (
<div className="button" style={{background: props.theme}}>
button
</div>
)
const ThemeButton = (props) => (
<div>
<Button theme={props.theme} />
</div>
)
const Toolbar = (props) => (
<div>
<ThemeButton theme={props.theme} />
</div>
)
const App = (props) => <Toolbar theme="blue" />;
export default App;
class组件使用context解决父子通信传递冗余
代码：
import React, {Component} from 'react';
import './App.css';
const ThemeContext = React.createContext()
class Button extends Component {
static contextType = ThemeContext;
render() {
return (
<div className="button" style={{ background: this.context }}>button</div>
)
}
}
const ThemeButton = (props) => (
<div>
<Button />
</div>
)
const Toolbar = (props) => (
<div>
<ThemeButton />
</div>
)
const App = (props) => (
<ThemeContext.Provider value="yellow">
<Toolbar />
</ThemeContext.Provider>
)
export default App;
- Context可以认为是一个公共的容器，页面上其他地方都可以访问到；
- React中使用React.createContext()来创建这样的上下文对象，这个对象创建好就可以存储我们共享的一些对象；
- 在APP中，我们之前是直接暴露Toolbar这个组件，现在用ThemeContext.Provider这个组件将其包裹起来，ThemeContext.Provider对应到原生的JS是一个函数，使用这个的意思可以带属性，意思就是提供一个值叫做yellow;
- 最里面组件要添加属性如static contextType = ThemeContext，将ThemeContext传递给它；
- 最里面的组件可以通过this.context直接拿到这个属性值
函数组件使用Context
代码：
import React, {Component} from 'react';
import './App.css';
const ThemeContext = React.createContext()
const Button = (props) => {
return (
<ThemeContext.Consumer>
{
val => (
<div
className="button"
style={{background: val.bgColor, borderColor: val.borderColor}}
>
button
</div>
)
}
</ThemeContext.Consumer>
)
}
const ThemeButton = (props) => (
<div>
<Button />
</div>
)
const Toolbar = (props) => (
<div>
<ThemeButton />
</div>
)
const theme = { bgColor: "red", borderColor: "pink" }
const App = (props) => (
<ThemeContext.Provider value={theme}>
<Toolbar />
</ThemeContext.Provider>
)
export default App;
- 我们在最里面组件那边使用Context的时候需要使用ThemeContext.Consumer，里面使用箭头函数；
- 箭头函数里面的val参数就是下面ThemeContext.Provider传递过来的参数；
Fragments
React中，一个比较常见的原则是，返回的组件必须只具有一个根元素，不可以出现两个并列的标签。
但是在一些情况下，比如表格元素的时候，我们可能需要并列的情况，否则，我们需要使用多余的div包裹它们。
代码：
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}}
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
返回的输出
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr></table>
- 上面这个返回的td有多余的div包裹
- Fragment可以实现包裹，但是在真实渲染的时候不进行渲染；
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
数据传递
React中父组件传递给子组件的数据使用props以及属性做单向的数据传递，那么子组件怎么把自己的数据传递给父组件呢？
我们通过属性传递的数据的时候，也可以进行监听数值变化。
import React, { Component } from 'react';
import './App.css';
function First(props) {
return <fieldset>
<legend>first name</legend>
<input value={props.value} onChange={props.onChange} />
</fieldset>
}
function Last(props) {
return <fieldset>
<legend>last name</legend>
<input value={props.value} onChange={props.onChange} />
</fieldset>
}
class App extends Component {
constructor(props) {
super(props)
this.state = {
first: 'af',
last: 'b'
}
}
render() {
return (
<div>
<First value={this.state.first} onChange={(e)=>{this.setState({first: e.target.value})}} />
<Last value={this.state.last} onChange={(e)=>{this.setState({last: e.target.value})}} />
<h1>姓名：{this.state.first + ' ' + this.state.last}</h1>
</div>
)
}
}
export default App;
错误边界
代码：
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能够显示降级后的 UI
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// 你同样可以将错误日志上报给服务器
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
// 你可以自定义降级后的 UI 并渲染
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
- 相当于原生JS中的try...catch，用于捕捉错误；
- 错误边界其实就是我们自定义的一个组件，这个组件可以包裹其他组件，当组件中发生错误的时候，进行捕获；
- componentDidCatch这个钩子函数很重要，里面实现的是具体的捕获后的逻辑；
- 主要用于生产环境的错误监测。
非受控组件与Refs
代码：
import React, { Component } from 'react';
import './App.css'
class App extends React.Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this);
this.fileInput = React.createRef();
}
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.current.files[0].name}`
)
}
render() {
return (
<form>
<label>
Upload file:
<input type="file" ref={this.fileInput} />
</label>
<br />
<button type="submit" onClick={this.handleSubmit.bind(this)}>Submit</button>
</form>
)
}
}
export default App;
- 对于受控组件，都会有一个属性与React的状态相绑定，并会使用监听函数，监听这个状态的变化，一旦发生变化就同步到React上；如input函数具有value属性，还可以使用onChange事件监听这个value属性；
- 对于非受控组件，如上面代码的input，类型为file，这是同一个非受控组件，因为里面没有value属性，无法受state控制，并且我们无法获知什么时候用户选择好文件；
- 我们这里就需要使用React.createRef()，生成一个指引，并绑定给当前组件；
- 给我们需要监测的input，添加一个ref属性，指向的就是组件上一步创建好的指引，此处为this.fileInput；这样做的一个好处就是，我们下次就可以通过this.fileInput拿到这个绑定的input的DOM元素；我们在使用原生JS的时候，会很容易得到这个DOM元素，但是我们现在使用的是React；React中不推荐使用原生JS；
- this.input.current就是当前指引的这个DOM对象。
