『译』React Mixin 的使用
我使用 为什么使用 Mixin ?
写一个简单的 Mixin现在假设我们在写一个app,我们知道在某些情况下我们需要在好几个组件当中设置默认的 var DefaultNameMixin = { getDefaultProps: function () { return {name: "Skippy"}; } }; 它没什么特殊的,就是一个简单的对象而已。 加入到 React 组件中为了使用 var ComponentOne = React.createClass({ mixins: [DefaultNameMixin],render: function() { return <h2>Hello {this.props.name}</h2>; } }); React.renderComponent(<ComponentOne />,document.body); JSFiddle 示例:一个简单的 mixin 例子 重复使用就像你想象的那样,我们可以在任何其他组件中包含我们的 var ComponentTwo = React.createClass({ mixins: [DefaultNameMixin],render: function () { return ( <div> <h4>{this.props.name}</h4> <p>Favorite food: {this.props.food}</p> </div> ); } }); JSFiddle 示例:在多个组件中使用同一个 mixin 生命周期方法会被重复调用!如何你的 JSFiddle 示例:展示了两个 default props 都会被设置 两个
Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `render` on your component more than once. This conflict may be due to a mixin.
需要指出的是, var UselessMixin = { componentDidMount: function () { console.log("asdas"); } }; var LolMixin = { mixins: [UselessMixin] }; var PantsOpinion = React.createClass({ mixins: [LolMixin],render: function () { return (<p>I dislike pants</p>); } }); React.renderComponent(<PantsOpinion />,document.body); 程序会在控制台打印出 包含多个 Mixins我们的 var DefaultNameMixin = { getDefaultProps: function () { return {name: "Lizie"}; } }; var DefaultFoodMixin = { getDefaultProps: function () { return {food: "Pancakes"}; } }; var ComponentTwo = React.createClass({ mixins: [DefaultNameMixin,DefaultFoodMixin],render: function () { return ( <div> <h4>{this.props.name}</h4> <p>Favorite food: {this.props.food}</p> </div> ); } }); 注意事项这里有几件事需要引起我们的注意,当我们使用 设置相同的 Prop 和 State如果你尝试在不同的地方定义相同的属性时会出现下面的异常: Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): Tried to merge two objects with the same key: name 设置相同的方法在不同的 var LogOnMountMixin = { componentDidMount: function () { console.log("mixin mount method"); this.logBlah() },// add a logBlah method here... logBlah: function () { console.log("blah"); } }; var MoreLogOnMountMixin = { componentDidMount: function () { console.log("another mixin mount method"); },// ... and again here. logBlah: function () { console.log("something other than blah"); } }; 异常信息同多次定义 Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `logBlah` on your component more than once. This conflict may be due to a mixin. 多个生命周期方法的调用顺序如果我们的组件和
那当我们的组件中包含多个
实例代码: var LogOnMountMixin = { componentDidMount: function () { console.log("mixin mount method"); } }; var MoreLogOnMountMixin = { componentDidMount: function () { console.log("another mixin mount method"); } }; var ComponentOne = React.createClass({ mixins: [MoreLogOnMountMixin,LogOnMountMixin],componentDidMount: function () { console.log("component one mount method"); },... var ComponentTwo = React.createClass({ mixins: [LogOnMountMixin,MoreLogOnMountMixin],componentDidMount: function () { console.log("component two mount method"); },... 控制台将输出: another mixin mount method mixin mount method component one mount method mixin mount method another mixin mount method component two mount method 总结Mixin 使你React程序变得更为可重用,It's a Good Thing.
翻译水平有限,文中带有个人理解,如有不恰当的地方,请在评论中指出,非常感谢! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |