React 真的是太灵活了,写它就感觉像是在写原生 JavaScript 一样,一个功能你可以有多种实现方式,例如你要实现动态样式,只要你愿意去做,你会有很多种解决方案,这可能也就是 React 会比 Vue 相对来说比较难一点的原因,这或许也就是这么喜欢 React 的原因了吧,毕竟它可是我见一个爱一个的技术之一🤣🤣🤣
也正是因为这个原因,在 React 中编写一个组件就给我们编写一个组件提供了多种方式,那么在接下来的文章中我们就来讲解一下这几种组件的设计模式。
Mixin设计模式
在上一篇文章中有讲解到了 JavaScript 中的 Mixin,如果对这个设计模式不太理解的可以通过这篇文章进行学习 来学习一下 JavaScript 中的 Mixin
如何在多个组件之间共享代码,是开发者们在学习 React 是最先问的问题之一,你可以使用组件组合来实现代码重构,你也可以定义一个组件并在其他几个组件中使用它。
如何用组合来解决某个模式并不是显而易见的,React 受函数式编程的影响,但是它进入了由面向对象库主导的领域(hooks 出现以前),为了解决这个问题,React 团队在这加上了 Mixin,它的目标就是当你不确定如何使用组合解决想用的问题时,为你提供一种在组件之间重用代码。
React 最主流构建 Component 的方法是利用 createClass 创建,顾名思义,就是创造一个包含 React 方法 Class 类。
Mixin危害
在 React 官方文档 Mixins Considered Harmful 中提到了 Mixin 带来的危害,主要有以下几个方面:
Mixin可能会相互依赖，相互耦合，不利于代码维护;- 不同的
Mixin中的方法可能会相互冲突; Mixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性;
装饰器模式
装饰器是一种特殊的声明,可以附加到类声明、方法、访问器、属性或参数上,装饰者使用 @+函数名 形式来修改类的行为。如果你对装饰器不太了解,你可以通过这一篇文章 TS的装饰器你再学不会我可就要报警了哈 进行学习。
现在我们来看看在 React 中怎么使用装饰器,我们现在有这样的一个需求,就是为被装饰的页面或组件设置统一的背景颜色和自定义颜色,完整代码具体如下:
import React, { Component } from "react";
interface Params {
background: string;
size?: number;
}
function Controller(params: Params) {
return function (
WrappedComponent: React.ComponentClass,
): React.ComponentClass {
WrappedComponent.prototype.render = function (): React.ReactNode {
return <div>但使龙城飞将在,不教胡马度阴山</div>;
};
return class Page extends Component {
render(): React.ReactNode {
const { background, size = 16 } = params;
return (
<div style={{ backgroundColor: background, fontSize: size }}>
<WrappedComponent {...this.props}></WrappedComponent>
</div>
);
}
};
};
}
@Controller({ background: "pink", size: 100 })
class App extends Component {
render(): React.ReactNode {
return <div>牛逼</div>;
}
}
export default App;
这段代码的具体输出如下所示:
在上面的代码中,Controller 装饰器会接收 App 组件,其中 WrappedComponent 就是我们的 App 组件,在这里我们通过修改原型方法 render 将其的返回值修改了,并对其进行了一层包裹。
所以 App 组件在使用了类装饰器,不仅可以修改了原来的 DOM,还对外层多加了一层包裹,理解起来就是接收需要装饰的类为参数,返回一个新的内部类。恰与 HOC 的定义完全一致。所以,可以认为作用在类上的 decorator 语法糖简化了高阶组件的调用。
高阶组件
HOC 高阶组件模式是 React 比较常用的一种包装强化模式之一,你也可以看作 React 对装饰模式的一种实现,高阶组件就是一个函数,并且该函数接收一个组件作为参数,并返回一个新的组件,它是一种设计模式,这种设计模式是由 React 自身的特性产生的结果。
高阶组件主要解决了以下问题,具体如下:
复用逻辑: 高阶组件就像是一个加工React组件的工厂,你需要向该工厂提供一个坯子,它可以批量地对你送进来的组件进行加工,包装处理,还可以根据你的需求定制不同的产品;强化props: 高阶组件返回的组件,可以劫持上一层传过来的props,染回混入新的props,来增强组件的功能;控制渲染: 劫持渲染是hoc中的一个特性,在高阶组件中,你可以对原来的组件进行条件渲染,节流渲染,懒加载等功能;
HOC的实现方式
常用的高阶组件有两种方式,它们分别是 正向属性代理 和 反向继承,接下来我们来看看这两者的区别。
正向属性代理
所谓正向属性代理,就是用组件包裹一层代理组件,在代理组件上,我们可以代理所有传入的 props,并且觉得如何渲染。实际上这种方式生成的高阶组件就是原组件的父组件,父组件对子组件进行一系列强化操作,上面那个装饰器的例子就是一个 HOC 正向属性代理的实现方式。
对比原生组件增强的项主要有以下几个方面:
可操作所有传入的props: 可以对其传入的props进行条件渲染,例如权限控制等;- 可以操作组件的生命周期;
- 可操作组件的
static方法,但是需要手动处理,或者引入第三方库; - 获取
refs; - 抽象
state;
反向继承
反向继承其实是一个函数接收一个组件作为参数传入,并返回了一个继承自该传入的组件的类,并且在该类的 render() 方法中返回 super.render() 方法,能通过 this 访问到源组件的生命周期、props、state、render等,相比属性代理它能操作更多的属性。
两者区别
- 属性代理是从组合的角度出发,这样有利于从外部操作被包裹的组件,可以操作的对象是
props,或者加一层拦截器或者控制器等; - 方向继承则是从继承的角度出发,是从内部去操作被包裹的组件,也就是可以操作组件内部的
state,生命周期,render函数等;
具体实例代码如下所示:
function Controller(WrapComponent: React.ComponentClass) {
return class extends WrapComponent {
public state: State;
constructor(props: any) {
super(props);
this.state = {
nickname: "moment",
};
}
render(): React.ReactNode {
return super.render();
}
};
}
interface State {
nickname: string;
}
@Controller
class App extends Component {
public state: State = {
nickname: "你小子",
};
render(): React.ReactNode {
return <div>{this.state.nickname}</div>;
}
}
反向继承主要有以下优点:
- 可以获取组件内部状态,比如
state,props,生命周期和事件函数; - 操作由
render()输出的React组件; - 可以继承静态属性,无需对静态属性和方法进行额外的处理;
反向继承也存在缺点,它和被包装的组件强耦合,需要知道被包装的组件内部的状态,具体是做什么,如果多个反向继承包裹在一起,状态会被覆盖。
HOC的实现
HOC 的实现方式按照上面讲到的两个分类一样,来分别讲解这两者有什么写法。
操作 props
该功能由属性代理实现,它可以对传入组件的 props 进行增加、修改、删除或者根据特定的 props 进行特殊的操作,具体实现代码如下所示:
import React, { Component } from "react";
interface Params {
background: string;
size?: number;
}
function Controller(params: Params) {
return function (
WrappedComponent: React.ComponentClass,
): React.ComponentClass {
WrappedComponent.prototype.render = function (): React.ReactNode {
return <div>但使龙城飞将在,不教胡马度阴山</div>;
};
return class Page extends Component {
render(): React.ReactNode {
const { background, size = 16 } = params;
return (
<div style={{ backgroundColor: background, fontSize: size }}>
<WrappedComponent {...this.props}></WrappedComponent>
</div>
);
}
};
};
}
@Controller({ background: "pink", size: 100 })
class App extends Component {
render(): React.ReactNode {
return <div>牛逼</div>;
}
}
export default App;
抽离state控制组件更新
高阶组件可以将 HOC 的 state 配合起来,控制业务组件的更新,在下面的代码中,我们将 input 的 value 提取到 HOC 中进行管理,使其变成受控组件,同时不影响它使用 onChange 方法进行一些其他操作,具体代码如下所示:
function Controller(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
};
this.onChange = this.onChange.bind(this);
}
onChange = (event) => {
this.setState({
name: event.target.value,
});
};
render() {
const newProps = {
value: this.state.name,
};
return (
<WrappedComponent
onChange={() => this.onChange}
{...this.props}
{...newProps}
/>
);
}
};
}
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.value}</h1>
<input name="name" {...this.props} />
</div>
);
}
}
export default Controller(App);
获取 Refs 实例
使用高阶组件后,获取到的 ref 实例实际上是最外层的容器组件,而非原组件,但是很多情况下我们需要用到原组件的 ref,我们先来看下面的代码,具体代码如下所示:
function Controller(WrappedComponent) {
return class Page extends React.Component {
render() {
const { ref, ...rest } = this.props;
return <WrappedComponent {...rest} ref={ref} />;
}
};
}
class Input extends React.Component {
render() {
return <input />;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentDidMount() {
console.log(this.ref);
}
render() {
return <Input ref={this.ref} />;
}
}
export default Controller(App);
通过查看控制台输出,你会发现获取到的是整个 Input 组件,那么有什么办法可以获取到 input 这个真实的 DOM 呢?
在之前的例子中我们可以通过 props 传递,一层一层传递给 input 原生组件来获取,具体代码如下:
class Input extends React.Component {
render() {
return <input ref={this.props.inputRef} />;
}
}
注意,因为传参不能传 ref,所以这里要修改一下
当然你也可以利用父组件的回调,具体代码如下:
class App extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentDidMount() {
console.log(this.ref);
}
render() {
return <Input inputRef={(e) => (this.ref = e)} />;
}
}
最终的代码如下图所示,这里展示了以上两个方法具体代码,如下图所示:
通过查看浏览器输出,两者都能成功输出原生的 ref 实例
React 给我们提供了一个 forwardRef 来帮助我们进行 refs 传递,这样我们在高阶组件上获取的 ref 实例就是原组件的 ref 了,而不需要手动传递,我们只需要修改一下 Input 组件代码即可,具体如下:
const Input = React.forwardRef((props, ref) => {
return <input type="text" ref={ref} />;
});
这样我们就获取到了原始组件的 ref 实例啦!
获取原组件的 static 方法
当待处理的组件为 class 组件时,通过属性代理实现的高阶组件可以获取到原组件的 static 方法,具体实现代码如下所示:
function Controller(WrappedComponent) {
return class Page extends React.Component {
componentDidMount() {
WrappedComponent.moment();
}
render() {
const { ref, ...rest } = this.props;
return <WrappedComponent {...rest} ref={ref} />;
}
};
}
class App extends React.Component {
static moment() {
console.log("你好骚啊");
}
render() {
return <div>你小子</div>;
}
}
export default Controller(App);
你好骚啊 正常输出
反向继承操作 state
因为我们高阶组件继承了传入组件,那么就是能访问到this了,有了 this 我们就能操作和读取 state,也就不用像属性代理那么复杂还要通过 props 回调来操作 state。
反向继承的基本实现方法就是原组件继承 Component,再在高阶组件中通过把原组件传参,再生成一个继承自原组件的组件。
具体实例代码如下所示:
function Controller(WrappedComponent) {
return class Page extends WrappedComponent {
componentDidMount() {
console.log(`组件挂载时 this.state 的状态为`, this.state);
setTimeout(() => {
this.setState({ nickname: "你个叼毛" });
}, 1000);
// this.setState({ nickname: 1 });
}
render() {
return super.render();
}
};
}
class App extends React.Component {
constructor() {
super();
this.state = {
nickname: "你小子",
};
}
render() {
return <h1>{this.state.nickname}</h1>;
}
}
export default Controller(App);
代码具体输出如下图所示,当组件挂载完成之后经过一秒,state 状态发生改变:
劫持原组件生命周期
因为反向继承方法实现的是高阶组件继承原组件,而返回的新组件属于原组件的子类,子类的实例方法会覆盖父类的,具体实例代码如下所示:
function Controller(WrappedComponent) {
return class Page extends WrappedComponent {
componentDidMount() {
console.log("生命周期方法被劫持啦");
}
render() {
return super.render();
}
};
}
class App extends React.Component {
componentDidMount() {
console.log("原组件");
}
render() {
return <h1>你小子</h1>;
}
}
export default Controller(App);
代码的具体输出如下图所示:
render props 模式
render props 的核心思想是通过一个函数将组件作为 props 的形式传递给另外一个函数组件。函数的参数由容器组件提供,这样的好处就是将组件的状态提升到外层组件中,具体实例代码如下所示:
const Home = (props) => {
console.log(props);
const { children } = props;
return <div>{children}</div>;
};
const App = () => {
return (
<div>
<Home admin={true}>
<h1>你小子</h1>
<h1>小黑子</h1>
</Home>
</div>
);
};
export default App;
具体的代码运行结果如下图所示:
虽然这样能实现效果,但是官方说这是一个傻逼行为,因此官方更推荐使用 React 官方提供的 Children 方法,具体实例代码如下所示:
const Home = (props) => {
console.log(props);
const { children } = props;
return <div>{React.Children.map(children, (node) => node)}</div>;
};
const App = () => {
return (
<div>
<Home admin={true}>
<h1>你小子</h1>
<h1>小黑子</h1>
</Home>
</div>
);
};
export default App;
具体更多信息请参考 官方文档
实际上,我们经常使用的 context 就是使用的 render props 模式。
反向状态回传
这个组件的设计模式很叼很骚,就是你可以通过 render props 中的状态,提升到当前组件中也就是把容器组件内的状态,传递给父组件,具体示例代码如下所示:
import React, { useRef, useEffect } from "react";
const Home = (props) => {
console.log(props);
const dom = useRef();
const getDomRef = () => dom.current;
const handleClick = () => {
console.log("小黑子");
};
const { children } = props;
return (
<div ref={dom}>
<div>{children({ getDomRef, handleClick })}</div>
<div>{React.Children.map(children, (node) => node)}</div>
</div>
);
};
const App = () => {
const childRef = useRef(null);
useEffect(() => {
const dom = childRef.current();
dom.style.background = "red";
dom.style.fontSize = "100px";
}, [childRef]);
return (
<div>
<Home admin={true}>
{({ getDomRef, handleClick }) => {
childRef.current = getDomRef;
return <div onClick={handleClick}>你小子</div>;
}}
</Home>
</div>
);
};
export default App;
在运行代码之后,我们首先点击一下 div 元素,具体有如下输出,请看下图:
你会看到成功的在父组件操作到了子组件的 ref 实例了,还获取到了子组件的 handleClick 函数并成功调用了。
提供者模式
考虑一下这个场景,就好像爷爷要给孙子送吃的,按照之前的例子中,要通过 props 的方式把吃的送到孙子手中,你首先要经过儿子手中,再由儿子传给孙子,那万一儿子偷吃了呢?孙子岂不是饿死了.....
为了解决这个问题,React 提供了 Context 提供者模式,它可以直接跳过儿子直接把吃的送到孙子手上,具体实例代码如下所示:
import React, { createContext, useContext } from "react";
const ThemeContext = createContext({ nickname: "moment" });
const Foo = () => {
const theme = useContext(ThemeContext);
return <h1>{theme.nickname}</h1>;
};
const Home = () => {
const theme = useContext(ThemeContext);
return <h1>{theme.nickname}</h1>;
};
const App = () => {
const theme = useContext(ThemeContext);
return (
<div>
{
<ThemeContext.Provider
value={{
nickname: "你小子",
}}
>
<Foo />
</ThemeContext.Provider>
}
{
<ThemeContext.Provider
value={{
nickname: "首页",
}}
>
<Home />
</ThemeContext.Provider>
}
<div>{theme.nickname}</div>
</div>
);
};
export default App;
代码输出如下图所示:
到这里本篇文章也就结束了,Hooks 的就不讲啦,在这篇文章中有讲到一点,喜欢的可以看看 如何优雅设地计出不可维护的 React 组件
参考资料
总结
不管是使用高阶组件、render props、context亦或是 Hooks,它们都有不同的使用场景,不能说哪个好用,哪个不好用,这就要根据到你的业务场景了,最后不得不说,React,你是真的骚啊......
最后希望这篇文章对你有帮助,如果错漏,欢迎留言指出,最后祝大嘎假期快来!
来源：juejin.cn/post/7230461901356154940
它可以代表从1920往下的分辨率
