高阶组件
本质
本质是函数，将组件作为接收参数，返回一个新的组件。HOC本身不是React API，是一种基于React组合的特而形成的设计模式。
解决的问题（作用）
- 一句话概括：功能的复用，减少代码冗余
- 进一步解释：在实际情况中，多个组件可能会做某些相同的事情，有着相同的功能，存在大量的代码冗余。我们可以将这部分功能拆分出来，每个组件尽量只保留自己独有的作用，通过HOC生成我们最终需要的组件。
实现方法：
无论哪种方法，都是在HOC函数内定义新的组件，在新的组件内做一些公共的功能和事情
- 属性代理
- 反向继承
属性代理
这是最常规的写法，原理等同于ES7装饰器、Python装饰器。函数传入的参数，除了原组件，还可以定义其他的参数，通过这些参数来区别每个实际组件。比如，公共的功能是获取数据。获取数据这件事情是相同的，但获取的内容不同。如何决定最后生成的组件获取各自指定的内容呢？通过函数传参。
// 示例用localstorage代替如网络请求等的异步操作
localStorage.setItem("comment","asuiklfhs");
localStorage.setItem("read","123"); class Comment extends React.Component { render() {
return (
<div>
{this.props.data}
</div>
)
}
} class Read extends React.Component { render() {
return (
<div>
{this.props.data}
</div>
)
}
} const HOCTest = (key) => {
return (WrappedComponent) => {
return class NewComponent extends React.Component{ constructor(props) {
super(props);
this.state = {
data: ''
};
} componentDidMount() {
const data = localStorage.getItem(key);
this.setState({
data
});
} render() {
console.log(this.myRef);
return (
<div ref={(e)=>{this.myRef = e;}}>
<WrappedComponent {...this.props} data={this.state.data} />
</div>
);
}
}
}
}; const CommentNew = HOCTest("comment")(Comment); // HOC生成新组件
const ReadNew = HOCTest("read")(Read); class Root extends React.Component {
render() {
return (
<div className="App">
Hello World
<CommentNew/>
<ReadNew/>
</div>
);
}
}
在这里，React第三方的组件库通常使用 函数柯里化 的写法。对于使用者来说，改变了调用函数时的传参方式，更加容易理解。即：原本调用函数wrapper(Component, params1, params2) 柯里化后调用wrapper(params1,params2)(Component)
属性代理常见的作用：
- 操作props
- 通过Refs访问组件实例
- 提取state
- 组合更多的html元素
反向继承
顾名思义，就是将返回的组件继承了原组件。它允许生成的组件通过this获取原组件，意味着可以获取到state,props,生命周期钩子，以及render
localStorage.setItem("comment","asuiklfhs");
localStorage.setItem("read","123");
class Comment extends React.Component {
constructor(props){
super(props);
this.state = {id:"comment"}
}
componentDidMount() {
console.log("Comment DidMount");
}
render() {
return (
<div>
{this.props.data}
</div>
)
}
}
class Read extends React.Component {
constructor(props){
super(props);
this.state = {id:"read"}
}
render() {
return (
<div>
{this.props.data}
</div>
)
}
}
const HOCTest = (key) => {
return (WrappedComponent) => {
return class NewComponent extends WrappedComponent{
componentDidMount() {
console.log("HOC DidMount");
const data = localStorage.getItem(key);
this.setState({
...this.state,
data
});
}
render() {
return (
<WrappedComponent data={this.state.data}/>
);
}
}
}
};
const CommentNew = HOCTest("comment")(Comment);
const ReadNew = HOCTest("read")(Read);
class Root extends React.Component {
render() {
return (
<div className="App">
Hello World
<CommentNew/>
<ReadNew/>
</div>
);
}
}
作用：
- 渲染劫持。由于新组件可以控制原组件的render方法，可以做各种控制渲染的操作。
- 操作state
注意点：
- 不要在函数内修改原组件
- 使用反向继承方式时，会丢失原本的显示名
- 不要在render函数中使用HOC
高阶组件的缺点：
- 难以溯源。如果原始组件A通过好几个HOC的构造，最终生成了组件B，不知道哪个属性来自于哪个HOC，需要翻看每个HOC才知道各自做了什么事情，使用了什么属性。
- props属性名的冲突。某个属性可能被多个HOC重复使用。
- 静态构建。新的组件是在页面构建之前生成，先有组件，后生成页面。
Render Props
作用
- 功能的复用，与HOC类似。
- 组件间数据的单向传递。
什么是Render Props？
是一个用于告知组件要渲染什么内容的函数属性。该函数返回一个组件，是渲染出来的内容。
class Cat extends React.Component {
render() {
const mouse = this.props.mouse;
return (
<p>位置：x:{ mouse.x } y: { mouse.y }</p>
);
}
}
class Mouse extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = { x: 0, y: 0 };
}
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
});
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{/*
Instead of providing a static representation of what <Mouse> renders,
use the `render` prop to dynamically determine what to render.
*/}
{this.props.render(this.state)}
</div>
);
}
}
class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>移动鼠标!</h1>
<Mouse render={mouse => (
<Cat mouse={mouse} />
)}/>
</div>
);
}
}
通过以上Demo可以看到，Mouse组件通过render属性（属性名也可以是别的名字），指定了渲染哪个子组件，并且子组件可以接收参数值，进而实现内部逻辑。
再进行分析，发现Mouse组件提供可变数据源，是一个基础数据的提供者，最关键的代码是：
{this.props.render(this.state)}
通过render属性，将数据传递给另外一个组件。至于这个数据拿来干什么，怎么去渲染，就不是它管的事情了。
因此，整个页面很多地方可能需要用到鼠标坐标数据，以上的例子就可以实现功能的复用。
相对高阶组件的优点：
- 不用担心props的命名冲突的问题
- 可以溯源，子组件的props一定来自父组件。
- 是动态构建的，页面在渲染后，可以动态地决定渲染哪个组件。
- 所有能用HOC完成的事情，Render Props都可以做，且更加灵活。
- 除了功能复用，还可以用作两个组件的单向数据传递。