React中文教程 - Mixins | Traits代码组合|代码复用机制

代码组合是为了让多个组件之间封分享代码,实现代码复用机制,概念与Python中的Mixins和PHP的Traits相类似。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>React | Mixins</title>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
<style>a{color:#00f;cursor:pointer;}a:hover{text-decoration:underline;}</style>
</head>
<body>
<script type="text/jsx">
/** @jsx React.DOM */
var Mixin1 = {
  componentDidMount: function() {
    console.log('Mixin1.componentDidMount()');
  }
};

var Mixin2 = {
  componentDidMount: function() {
    console.log('Mixin2.componentDidMount()');
  }
};


var MyComponent = React.createClass({
  mixins: [Mixin1,Mixin2],render: function() {
    return <div>hello world</div>;
  }
});
var myMyComponent = <MyComponent />;
React.renderComponent(myMyComponent,document.body);
</script>
</body>
</html>
  • 代码共用 - 代码复用
  • 一个组件同时可以添加多个Mixins
  • 每个Mixins不能定义相同名字的函数
  • 但可以定义相同的预定义函数(Lifecycle Method),而相同函数会被顺序执行。shouldComponentUpdate例外,这个函数不能重定义
  • 可以使用外部类库实现Mixins然后提供给React使用


您可以修改并重新发布本文,如果您能留下本文的参考连结,万分谢谢! 如果您对本文存在疑问,欢迎留言或者直接对本文评论,我会在看到的第一时间回复您。

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...