• 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包含以上的DefaultNameMixinDefaultFriendMixin

    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

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

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

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

    • React Mixin 的使用[1]
    • Mixins Considered Harmful[2]
  • 相关阅读:
    将十六进制数组转换为字符串
    TEA(Tiny Encryption Algorithm)
    Install Atom editor in ubuntu 14.04
    Install Sublime Text 3
    测试键盘的控制字符对应的ASCII码值
    Linux 文件访问权限
    Linux 关机命令
    数据创建命令
    关键词
    MySQL命令总汇
  • 原文地址:https://www.cnblogs.com/rsapaper/p/15967187.html
Copyright © 2020-2023  润新知