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

constDefaultNameMixin={
getDefaultProps:function(){
return{
name:"Joy"
}
}
}

為了使用mixin，需要在元件中加入mixins屬性，然後把我們寫好的mixin包裹成一個數組，將它作為mixins的屬性值：

constComponentOne=React.createClass({
mixins:[DefaultNameMixin]
render:function(){
return<h2>Hello{this.props.name}</h2>
}
})
 

寫好的mixin可以在其他元件裡重複使用。

由於mixins屬性值是一個數組，意味著我們可以同一個元件裡呼叫多個mixin。在上述例子中稍作更改得到：

constDefaultFriendMixin={
getDefaultProps:function(){
return{
friend:"Yummy"
}
}
}

constComponentOne=React.createClass({
mixins:[DefaultNameMixin,DefaultFriendMixin]
render:function(){
return(
<div>
<h2>Hello{this.props.name}</h2>
<h2>Thisismyfriend{this.props.friend}</h2>
</div>
)
}
})

我們甚至可以在一個mixin裡包含其他的mixin。

比如寫一個新的mixin``DefaultProps包含以上的DefaultNameMixin和DefaultFriendMixin：

constDefaultPropsMixin={
mixins:[DefaultNameMixin,DefaultFriendMixin]
}

constComponentOne=React.createClass({
mixins:[DefaultPropsMixin]
render:function(){
return(
<div>
<h2>Hello{this.props.name}</h2>
<h2>Thisismyfriend{this.props.friend}</h2>
</div>
)
}
})

至此，我們可以總結出mixin至少擁有以下優勢:

• 可以在多個元件裡使用相同的mixin；
• 可以在同一個元件裡使用多個mixin；
• 可以在同一個mixin裡巢狀多個mixin；

但是在不同場景下，優勢也可能變成劣勢：

• 破壞原有元件的封裝，可能需要去維護新的state和props等狀態；
• 不同mixin裡的命名不可知，非常容易發生衝突；
• 可能產生遞迴呼叫問題，增加了專案複雜性和維護難度；

除此之外，mixin在狀態衝突、方法衝突、多個生命週期方法的呼叫順序等問題擁有自己的處理邏輯。感興趣的同學可以參考一下以下文章：

• React Mixin 的使用^[1]
• Mixins Considered Harmful^[2]