浅谈React mixins

港控/mmm° 2022-06-17 13:44 228阅读 0赞

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为 跨切面关注点，React使用 mixins 来解决这类问题。

一个通用的场景是：一个组件需要定期更新，React提供生命周期方法来告知组件创建或销毁的时间。

eg：mixins实现使用 setInterval() 并保证在组件销毁时清理定时器

var SetIntervalMixin = {
    	componentWillMount: function() {
    		this.intervals = [];
    	},
    	setInterval: function() {
    		this.intervals.push(setInterval.apply(null, arguments));
    	},
    	componentWillUnmount: function() {
    		this.intervals.forEach(clearInterval);
    	}
    };
    var SetInterval = React.createClass({
    	mixins: [SetIntervalMixin], // 引用mixin
    	getInitialState: function() {
    		return {seconds: 0};
    	},
    	componentDidMount: function() {
    		this.setInterval(this.update, 1000); // 调用mixin的setInterval方法
    	},
    	update: function() {
    		this.setState({seconds: this.state.seconds + 1});
    	},
    	render: function() {
    		return (
    			<p>React has been running for {this.state.seconds} seconds！</p>
    		);
    	}
    });
    ReactDOM.render(
    	<SetInterval />,
    	document.getElementById('timeBox')
    );

mixins的优点：

如果一个组件使用了多个mixin，并有多个mixin 定义了同样的生命周期方法（如在组件销毁时做资源清理操作等），所有这些生命周期方法都保证会被执行到，执行顺序是：首先按mixin引入顺序执行mixin里的方法，最后执行组件内定义的方法。

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 229 阅读

相关浅谈React的createFactory()方法

1、作用：创建React组件实例。 2、实现：只需创建一个带type参数的createElement的绑定函数即可。 React.createFa

水深无声/ 2022年06月17日 12:36/ 0 赞/ 258 阅读

相关浅谈React实现过滤器

思路： 1、在最顶层组件中创建state； 2、监听底层组件的输入框和多选按钮的onchange事件，借助this.prop通过函数传递输入框和多选按钮的值给上层组件；

喜欢ヅ旅行/ 2022年06月17日 12:17/ 0 赞/ 265 阅读

相关浅谈React实现输入框

组件要实现的功能： 1、定制label和输入框的placeholder的内容； 2、输入的内容不符合正则表达式要求时，输入框标红，符合时标绿； 3、点击清除按钮后，按钮消

浅浅的花香味﹌/ 2022年06月17日 12:06/ 0 赞/ 370 阅读

相关浅谈React编程思想

React是Facebook推出的面向视图层开发的一个框架，用于解决大型应用，包括如何很好地管理DOM结构，是构建大型，快速Web app的首选方式。 React使用Java

野性酷女/ 2022年06月17日 11:14/ 0 赞/ 234 阅读

相关浅谈React.createElement()方法

document有createElement()方法，React也有createElement()方法，下面就来介绍React的createElement()方法。

超、凢脫俗/ 2022年06月17日 09:42/ 0 赞/ 787 阅读

相关浅谈React实现搜索匹配

search.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" hr

傷城~/ 2022年06月17日 09:18/ 0 赞/ 214 阅读

相关浅谈React实现todolist

todoList.html： <!DOCTYPE html> <html> <head> <link rel="styleshee

爱被打了一巴掌/ 2022年06月17日 09:18/ 0 赞/ 204 阅读

相关浅谈React Router入门

1、Router组件 1) history属性用于监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。 history属

短命女/ 2022年06月15日 04:14/ 0 赞/ 292 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 286 阅读