1)涉及不合理的地方
数据传递方向、闪变
npm install react-helmet --save
import React from "react"; import { Helmet } from "react-helmet"; import { connect } from "react-redux"; const MetaTitle = (props) => { const { title } = props; return ( <div className="application"> <Helmet> <meta charSet="utf-8" /> <title>{title}</title> <link rel="canonical" href="http://mysite.com/example" /> </Helmet> ... </div> ); }; const mapStateToProps = (state) => { return {}; }; const mapDispatchToProps = (dispatch, ownProps) => { return {}; }; export default connect(mapStateToProps, mapDispatchToProps)(MetaTitle);
src\components\common\MetaTitle.jsx
商品详情页
import MetaTitle from "@/components/common/MetaTitle"; return ( <div> <MetaTitle title="详情页"></MetaTitle>
React 代码共享最佳实践方式 https://mp.weixin.qq.com/s/xhiMjirgUhfO9dVqY5M9tQ
在 React 中使用 Mixin
假设在我们的项目中,多个组件都需要设置默认的name
属性,使用mixin
可以使我们不必在不同的组件里写多个同样的getDefaultProps
方法,我们可以定义一个mixin
:
const DefaultNameMixin = {
getDefaultProps: function () {
return {
name: "Joy"
}
}
}
为了使用mixin
,需要在组件中加入mixins
属性,然后把我们写好的mixin
包裹成一个数组,将它作为mixins
的属性值:
const ComponentOne = React.createClass({
mixins: [DefaultNameMixin]
render: function () {
return <h2>Hello {this.props.name}</h2>
}
})
写好的mixin
可以在其他组件里重复使用。
由于mixins
属性值是一个数组,意味着我们可以同一个组件里调用多个mixin
。在上述例子中稍作更改得到:
const DefaultFriendMixin = {
getDefaultProps: function () {
return {
friend: "Yummy"
}
}
}
const ComponentOne = React.createClass({
mixins: [DefaultNameMixin, DefaultFriendMixin]
render: function () {
return (
<div>
<h2>Hello {this.props.name}</h2>
<h2>This is my friend {this.props.friend}</h2>
</div>
)
}
})
我们甚至可以在一个mixin
里包含其他的mixin
。
比如写一个新的mixin``DefaultProps
包含以上的DefaultNameMixin
和DefaultFriendMixin
:
const DefaultPropsMixin = {
mixins: [DefaultNameMixin, DefaultFriendMixin]
}
const ComponentOne = React.createClass({
mixins: [DefaultPropsMixin]
render: function () {
return (
<div>
<h2>Hello {this.props.name}</h2>
<h2>This is my friend {this.props.friend}</h2>
</div>
)
}
})
至此,我们可以总结出mixin
至少拥有以下优势:
- 可以在多个组件里使用相同的
mixin
; - 可以在同一个组件里使用多个
mixin
; - 可以在同一个
mixin
里嵌套多个mixin
;
但是在不同场景下,优势也可能变成劣势:
- 破坏原有组件的封装,可能需要去维护新的
state
和props
等状态; - 不同
mixin
里的命名不可知,非常容易发生冲突; - 可能产生递归调用问题,增加了项目复杂性和维护难度;
除此之外,mixin
在状态冲突、方法冲突、多个生命周期方法的调用顺序等问题拥有自己的处理逻辑。感兴趣的同学可以参考一下以下文章:
- React Mixin 的使用[1]
- Mixins Considered Harmful[2]