React系列——HOC高阶组件的封装与使用

技巧一：复用组件逻辑

具体而言，高阶组件是参数为组件，返回值为新组件的函数

const EnhancedComponent = higherOrderComponent(WrappedComponent);

For example:
参数复用

const withSize = (Component) => {return class toSize extends Component {state = {xPos: document.documentElement.clientWidth,yPos: document.documentElement.clientHeight}getPos = () => {this.setState({xPox: document.documentElement.clientWidth,yPos: document.documentElement.clientHeight})}componentDidMount(){window.addEventListener('resize', this.getPos)}componentWillUnmount(){window.removeEventListener('resize', this.getPos)}render() {return <Component {...this.state}/>}}
}class Foo extends Component {render() {return (<div><p>x:{ this.props.xPos} -- y: {this.props.yPos} </p></div>)}
}class Sub extends Component {render() {return (<div><button>x:{ this.props.xPos} -- y: {this.props.yPos} </button></div>)}
}const SubWithSize = withSize(Sub)
const FooWithSize = withSize(Foo)class App extends Component {render() {return (<div><SubWithSize /><FooWithSize /></div>	)}
}

函数逻辑复用

// PhotoList.js
import React from 'react'
import withFetch from '../withFetch'const url = 'https://www.abc.com/photos?_limit=5const PhotoList = ({ list }) => {return (<ul> {list.map((photo) => {return <li key={photo.id}> 图片URL：{photo.url}</li>})}</ul>)
}
export default withFetch(PhotoList, url)

// UserList.js
import React from 'react'
import withFetch from '../withFetch'const url = 'https://www.abc.com/users?_limit=5const UserList = ({ list }) => {return (<ul> {list.map((user) => {return <li key={user.id}> 用户名：{user.name}</li>})}</ul>)
}
export default withFetch(UserList, url)

import React from 'react'
import axios from 'axios'const withFetch = (Component, url) => {return class WithFetchComponent extends React.Component {state = {list: []}async componentDidMount() {const { data: list } = await axios.get(url)this.setState({list})}render() {return <Component {...this.props} list={this.state.list} /}}}
}

技巧二：组件的异步加载

利用lazy、suspense来实现组件的异步加载

• 1、lazy引入异步组件

import ReactDOM from 'react-dom'
import React, { Component, lazy, Suspense } from 'react'
const sub = lazy(() => import('./Sub'))

2、suspense调用组件

class App extends Component {render() {return (<div>/*fallback的作用是在异步加载的空档中填充一些内容让页面可以正常渲染 */<Suspense fallback = { <div>loading</div> }><Sub /></Suspense></div>)}
}ReactDOM.render(<App />,document.getElementById('rroot')
)

技巧三：组件的生命周期

Mounting（挂载）

• constructor(): 在 React 组件挂载之前，会调用它的构造函数。
• getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
• render(): 唯一必须实现的纯函数；
• componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

Updating（更新）

• componentDidUpdate(): 在组件更新后立即调用

Unmounting（卸载）

• componentWillUnmount(): 在组件卸载后理解调用

For example:

class App extends Component {constructor(props) {super(props)this.state = { count: 0 }console.log('cons');}onclick = () => {this.setState({count: this.state.count + 1})}componentDidMount(){console.log('did mount');}componentDidUpdate(){console.log('did update');}componentWillUnmount(){console.log('will unmount');}return() {console.log('render')return (<div><p> {this.state.count} </p><button onclick={this.onclick}>add</button></div>)}// 执行顺序:()
// cons -> render -> did mount (mounting阶段)
// -> render -> did update (updating阶段)
// -> will unmount (unmounting阶段)

技巧四：组件的优化

• 避免无数据更新的自组件反复更新
  

import ReactDOM from 'react-dom'
import React, { Component, PureComponent, memo } from 'react'//组件的优化一: 类组件
class Sub extends Component //方法二：替换成PureComponent {// 方法一shouldComponentUpdate(nextProps, nextState){if (nextProps.name === this.props.name) {return false;}return true;}render() {console.log('sub render');return (<div>sub</div>)}
}//组件的优化二: 函数组件
const Sub = memo((params) => {console.log('sub render');return (<div>sub</div>)
})class App extends Component {state = {count: 0}onclick = () => {this.setState({count: this.state.count + 1})}callback = () => {}render() {return (<div><Sub name="zhangsan" />// 函数同理<Sub func={this.callback} /><p> {this.state.count} </p><button onclick={this.onclick}>add</button></div>)}
}ReactDOM.render(<App />,document.getElementById('rroot')
)