react 动态 标题

 

 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]