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 (
    

      
        
        {title}
        
      
      ...
    

  );
};

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 (

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 
Hello {this.props.name}

  }
})

写好的mixin可以在其他组件里重复使用。

由于mixins属性值是一个数组，意味着我们可以同一个组件里调用多个mixin。在上述例子中稍作更改得到：

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

const ComponentOne = React.createClass({
  mixins: [DefaultNameMixin, DefaultFriendMixin]
  render: function () {
    return (
      

        
Hello {this.props.name}

        
This is my friend {this.props.friend}

      

    )
  }
})

我们甚至可以在一个mixin里包含其他的mixin。

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

const DefaultPropsMixin = {
  mixins: [DefaultNameMixin, DefaultFriendMixin]
}

const ComponentOne = React.createClass({
  mixins: [DefaultPropsMixin]
  render: function () {
    return (
      

        
Hello {this.props.name}

        
This is my friend {this.props.friend}

      

    )
  }
})

至此，我们可以总结出mixin至少拥有以下优势:

  • 可以在多个组件里使用相同的mixin；
  • 可以在同一个组件里使用多个mixin；
  • 可以在同一个mixin里嵌套多个mixin；

但是在不同场景下，优势也可能变成劣势：

  • 破坏原有组件的封装，可能需要去维护新的state和props等状态；
  • 不同mixin里的命名不可知，非常容易发生冲突；
  • 可能产生递归调用问题，增加了项目复杂性和维护难度；

除此之外，mixin在状态冲突、方法冲突、多个生命周期方法的调用顺序等问题拥有自己的处理逻辑。感兴趣的同学可以参考一下以下文章：

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

相关

标签