精华内容
下载资源
问答
  • page模式和component模式

    2020-04-24 17:07:23
    这一节了解page和component的区别。 说明 page是官方默认组件,样式固定单一;component是自定义组件,可以灵活配置。 1 生命周期 Page: onLoad()、onReady()、onShow()、onHide()、onUnload()五个页面生命周期函数...

    前言

    这一节了解page和component的区别。

    说明

    page是官方默认组件,样式固定单一;component是自定义组件,可以灵活配置。

    1 生命周期

    Page:

    • onLoad()、onReady()、onShow()、onHide()、onUnload()五个页面生命周期函数,其分别是页面加载、就绪、渲染、隐藏、卸载时被调用。

    components:

    • created()、attached()、ready()、moved()、detached()分别是组件实例化(未导入节点树)、节点树完成、布局完成、移动、移除时被调用(2.2.3之后,可以在lifetimes:{}中定义,优先级为最高)
    • 组件所在页面的生命周期pageLifeTimes:show()、hide()、resize()分别是页面展示、隐藏、尺寸变化时被调用

    2 实例

    以底部和顶部导航栏为例。

    page模式

    如果是功能简单,页面不多的小程序,所有页面使用page注册即可。
    直接拿 第三节 的demo来修改,不详细描述。
    打开app.json,可以配置顶部导航栏和底部的tabbar

    "tabBar": {
        "color": "#707070",
        "selectedColor": "#2DBB55",
        "backgroundColor": "#FAFAFA",
        "list": [
          {
            "selectedIconPath": "image/main_select.png",
            "iconPath": "image/main.png",
            "pagePath": "pages/tab/tab1",
            "text": "首页"
          },
          {
            "selectedIconPath": "image/depart_select.png",
            "iconPath": "image/depart.png",
            "pagePath": "pages/tab/tab2",
            "text": "功能大全"
          },
          {
            "selectedIconPath": "image/mine_select.png",
            "iconPath": "image/mine.png",
            "pagePath": "pages/tab/tab3",
            "text": "我的"
          }
        ]
      },
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#6FC",
        "navigationBarTitleText": "基本效果",
        "navigationBarTextStyle": "black"
      },
    

    效果如下:
    在这里插入图片描述

    component模式

    这里引入colorUI,colorUI在下一节中再去详细了解。

    1)colorUI传送门 :https://github.com/weilanwl/ColorUI
    2)下载后,将demo下的colorui拷贝至项目根目录
    在这里插入图片描述
    3)打开app.wxss,引入colorui样式

    @import "colorui/main.wxss";
    @import "colorui/icon.wxss";
    

    4)打开app.json,引入colorui组件

      "usingComponents": {
        "cu-custom": "/colorui/components/cu-custom"
      },
    

    5)配置顶部导航栏,设置为自定义

    "window": {
        "navigationStyle": "custom"
      },
    

    6)打开app.js,获取系统参数

    onLaunch: function () {
        wx.getSystemInfo({
          success: e => {
            this.globalData.StatusBar = e.statusBarHeight;
            let custom = wx.getMenuButtonBoundingClientRect();
            this.globalData.Custom = custom;  
            this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
          }
        })
      },
    

    7)打开tab1.js

    const app = getApp();
    Component({
      data: {
        PageCur: 'main'
      },
      methods: {
        NavChange(e) {
          this.setData({
            PageCur: e.currentTarget.dataset.cur
          })
        },
      }
    })
    

    8)打开tab1.wxml,自定义导航栏

    <cu-custom bgColor="bg-gradual-blue" isBack="{{true}}" >
      <view slot="backText" ></view>
      <view slot="content" >组件</view>
    </cu-custom>
    

    9)自定义底部tabbar

    <view class="cu-bar tabbar bg-white shadow foot">
      <view class="action" bindtap="NavChange" data-cur="main">
        <view class='cuIcon-cu-image'>
          <image src="/image/main{{PageCur=='main'?'_select':''}}.png"></image>
        </view>
        <view class="{{PageCur=='main'?'text-green':'text-gray'}}">主页</view>
      </view>
      <view class="action" bindtap="NavChange" data-cur="depart">
        <view class='cuIcon-cu-image'>
          <image src="/image/depart{{PageCur=='depart'?'_select':''}}.png"></image>
        </view>
        <view class="{{PageCur=='depart'?'text-green':'text-gray'}}">功能大全</view>
      </view>
      <view class="action" bindtap="NavChange" data-cur="mine">
        <view class='cuIcon-cu-image'>
          <image src="/image/mine{{PageCur=='mine'?'_select':''}}.png"></image>
        </view>
        <view class="{{PageCur=='mine'?'text-green':'text-gray'}}">我的</view>
      </view>
    </view>
    

    效果如下:
    在这里插入图片描述

    展开全文
  • 目录page和component的区别page模式一,配置app.json参数,设置头部底部样式1,设置头部2,设置底部3,新建页面 page和component的区别 简单地说,page是官方默认组件,component是自定义组件。当你需要开发一个有...

    page和component的区别

    简单地说,page是官方默认组件,component是自定义组件。当你需要开发一个有特色的,可灵活配置样式的小程序,就要用到component。开发一个小程序前先确定是否需要自定义component模板来做,相对来说,page比较简单快捷,但是样式固定单一。而component可以有更多功能,例如头部返回主页按钮,头部图片背景,自定义底部导航样式和底部导航根据头部背景色而变化等等。

    page模式

    如果是简单功能,页面不多的小程序,即可直接配置参数,所有页面用page注册即可。官方文档

    1,设置头部

    "window": {
        "backgroundTextStyle": "下拉 loading 的样式,仅支持 dark / light	",
        "navigationBarBackgroundColor": "背景色",
        "navigationBarTitleText": "标题",
        "navigationBarTextStyle": "导航栏标题颜色,仅支持 black / white"
      },
    

    2,设置底部

    首先找几个底部的图标,分2种颜色,点击前和点击后(建议灰色和绿色)在这里插入图片描述

    "tabBar": {
        "color": "#707070",//默认颜色
        "selectedColor": "#2DBB55",//选中后颜色
        "backgroundColor": "#FAFAFA",//背景颜色
        "list": [
          {
            "selectedIconPath": "image/tabBar11.png",//点击后的图标
            "iconPath": "image/tabBar1.png",//默认图标
            "pagePath": "pages/index/index",//点击后跳转的链接
            "text": "首页"//附带文字
          },
          {
            "selectedIconPath": "image/tabBar22.png",
            "iconPath": "image/tabBar2.png",
            "pagePath": "pages/staff/staff_index/staff_index",
            "text": "功能"
          },
          {
            "selectedIconPath": "image/tabBar33.png",
            "iconPath": "image/tabBar3.png",
            "pagePath": "pages/visitor/visitor_index/visitor_index",
            "text": "我的"
          }
        ]
      },
    

    看看效果图在这里插入图片描述

    3,新建页面

    新建一个目录后,会有js,json,wxml和wxss4个文件,其中wxml和wxss其实就是html和css差不多,主要是配置js文件。打开js文件后可以看到默认帮你列出很多api,把你想执行的动作写到相应的api里。

    特别注意的是

    如需从服务器获取再进行渲染的数据,最好请求和渲染都写在onShow里,避免页面样式没加载完就开始渲染了。
    在这里插入图片描述

    component模式

    官方文档

    1,新建组件-自定义头部栏

    组件例子来自于ColorUI2.0-作者【文晓港】
    JS
    1,在 methods配置了2个方法,分别是头部的返回上一页和返回首页,
    2,properties里的4个对外属性,对应头部栏的背景色,返回主页按钮,上一页按钮和背景图

    const app = getApp();
    Component({
      /**
       * 组件的一些选项
       */
      options: {
        addGlobalClass: true,
        multipleSlots: true
      },
      /**
       * 组件的对外属性
       */
      properties: {
        bgColor: {
          type: String,
          default: ''
        }, 
        isCustom: {
          type: [Boolean, String],
          default: false
        },
        isBack: {
          type: [Boolean, String],
          default: false
        },
        bgImage: {
          type: String,
          default: ''
        },
      },
      /**
       * 组件的初始数据
       */
      data: {
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        Custom: app.globalData.Custom
      },
      /**
       * 组件的方法列表
       */
      methods: {
        BackPage() {
          wx.navigateBack({
            delta: 1
          });
        },
        toHome(){
          wx.reLaunch({
            url: '/pages/index/index',
          })
        },
      }
    })
    

    json

    {
      "component": true,
      "usingComponents": {}
    }
    

    wxml
    1,组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。
    在组件模板中可以提供一个 节点,用于承载组件引用时提供的子节点。

    <view class="cu-custom" style="height:{{CustomBar}}px">
      <view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}">
        <view class="action" bindtap="BackPage" wx:if="{{isBack}}">
          <slot name="backText"></slot>
        </view>
        <view class="action border-custom"  wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)">
          <text class="cuIcon-back top_back" bindtap="BackPage"></text>
          <text class="cuIcon-homefill top_home" bindtap="toHome"></text>
        </view>
        <view class="content" style="top:{{StatusBar}}px">
          <slot name="content"></slot>
        </view>
        <slot name="right"></slot>
      </view>
    </view>
    

    例子:1,主页页头,可分ios(居中)和安卓(居左)

      <cu-custom wx:if="{{platform=='ios'}}" bgColor="bg-gradual-{{Theme}}">
        <view slot="content">{{Name}}</view>
      </cu-custom>
      <cu-custom wx:if="{{platform!='ios'}}" bgColor="bg-gradual-{{Theme}}" isBack="{{true}}">
        <view class="text-cut text-lg" slot="backText">{{Name}}</view>
      </cu-custom>
    

    在这里插入图片描述
    在这里插入图片描述
    2,居左带返回上一页按钮

    <cu-custom bgColor="bg-gradual-{{Theme}}" isBack="{{true}}">
      <view class="text-cut flex align-center" slot="backText">
        <text class="cuIcon-back text-xxl"></text><text class="text-lg">{{Name}}</text>
      </view>
    </cu-custom>
    

    在这里插入图片描述
    3,居中带返回主页按钮

    <cu-custom bgColor="bg-gradual-{{Theme}}" isBack="{{true}}">
      <view slot="backText"><text class="cuIcon-back text-xxl"></text></view>
      <view slot="content">图片裁剪</view>
    </cu-custom>
    

    在这里插入图片描述
    4,居中带返回主页按钮和返回上一页按钮

    <cu-custom bgColor="bg-gradual-{{Theme}}" isCustom="{{true}}">
      <view slot="content">{{Name}}</view>
    </cu-custom>
    

    在这里插入图片描述
    5,更可以在头部栏使用图片当背景,

    <scroll-view scroll-y class="scrollPage">
      <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
        <view slot="content">
          <image src="/images/cjkz.png" mode="widthFix"></image>
        </view>
      </cu-custom>
    </scroll-view>
    

    6,甚至在初始页面,只使用图片当头部栏也可以!

    <scroll-view scroll-y class="scrollPage">
      <image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
    </scroll-view>
    

    2,自定义底部栏

    1,特殊的个性样式

    <view class="cu-bar tabbar margin-bottom-xl bg-white">
        <view class="action text-green">
          <view class="cuIcon-homefill"></view> 首页
        </view>
        <view class="action text-gray">
          <view class="cuIcon-similar"></view> 分类
        </view>
        <view class="action text-gray add-action">
          <button class="cu-btn cuIcon-add bg-green shadow"></button>
          发布
        </view>
        <view class="action text-gray">
          <view class="cuIcon-cart">
            <view class="cu-tag badge">99</view>
          </view>
          购物车
        </view>
        <view class="action text-gray">
          <view class="cuIcon-my">
            <view class="cu-tag badge"></view>
          </view>
          我的
        </view>
      </view>
      <view class="cu-bar tabbar bg-black">
        <view class="action text-green">
          <view class="cuIcon-homefill"></view> 首页
        </view>
        <view class="action text-gray">
          <view class="cuIcon-similar"></view> 分类
        </view>
        <view class="action text-gray add-action">
          <button class="cu-btn cuIcon-add bg-green shadow"></button>
          发布
        </view>
        <view class="action text-gray">
          <view class="cuIcon-cart">
            <view class="cu-tag badge">99</view>
          </view>
          购物车
        </view>
        <view class="action text-gray">
          <view class="cuIcon-my">
            <view class="cu-tag badge"></view>
          </view>
          我的
        </view>
      </view>
    

    在这里插入图片描述
    2,根据颜色数组赋值控制小程序主题色,底部栏和头部栏统一颜色的做法
    先准备7彩底部图(根据主题数组颜色)
    在这里插入图片描述
    wxml

    <home wx:if="{{PageCur=='home'}}"></home>
    <server wx:if="{{PageCur=='server'}}"></server>
    <my wx:if="{{PageCur=='my'}}"></my>
    <view class="cu-bar tabbar bg-white shadow foot">
      <view class="action" bindtap="NavChange" data-cur="home">
        <view class='cuIcon-cu-image'>
          <image src="/images/tabbar/{{Home_img}}.png"></image>
        </view>
        <view class="{{Home_text}}">首页</view>
      </view>
      <view class="action" bindtap="NavChange" data-cur="server">
        <view class='cuIcon-cu-image'>
          <image src="/images/tabbar/{{Server_img}}.png"></image>
        </view>
        <view class="{{Server_text}}">服务</view>
      </view>
      <view class="action" bindtap="NavChange" data-cur="my">
        <view class='cuIcon-cu-image'>
          <image src="/images/tabbar/{{My_img}}.png"></image>
        </view>
        <view class="{{My_text}}">我的</view>
      </view>
    </view>
    

    json

    {
      "usingComponents": {
        "home": "/pages/home/home",
        "server": "/pages/server/server",
        "my": "/pages/my/my"
      }
    }
    

    js

    const app = getApp();
    Page({
      data: {
        PageCur: 'home',//默认进入主页
        Home_img: 'home_' + app.globalData.Theme,
        Server_img: 'server',
        My_img: 'my',
        Home_text: 'text-' + app.globalData.Theme,
        Server_text: 'text-gray',
        My_text: 'text-gray',
      },
    
      //底部导航切换
      NavChange(e) {
        let pagecur = e.currentTarget.dataset.cur;
        let home_img = pagecur == 'home' ? 'home_' + app.globalData.Theme:'home';
        let server_img = pagecur == 'server' ? 'server_' + app.globalData.Theme : 'server';
        let my_img = pagecur == 'my' ? 'my_' + app.globalData.Theme : 'my';
        let home_text = pagecur == 'home' ? 'text-' + app.globalData.Theme : 'text-gray';
        let server_text = pagecur == 'server' ? 'text-' + app.globalData.Theme : 'text-gray';
        let my_text = pagecur == 'my' ? 'text-' + app.globalData.Theme : 'text-gray';
        this.setData({
          PageCur: pagecur,
          Home_img: home_img,
          Server_img: server_img,
          My_img: my_img,
          Home_text: home_text,
          Server_text: server_text,
          My_text: my_text,
        })
      },
      onShareAppMessage() {
        return {
          title: app.globalData.CoinName,
          imageUrl: app.globalData.ImageUrl,
          path: '/pages/index/index'
        }
      },
    })
    

    最后component模式的底部栏页面的参数和page有所不同,已home为例
    js
    组件生命周期

    const app = getApp();
    Component({
      options: {
        addGlobalClass: true,
      },
      data: {
        Theme: app.globalData.Theme,
      },
    
      //组件的生命周期
      lifetimes: {
        created: function () {
          // 在组件实例刚刚被创建时执行
          var that = this;  
        },
        attached: function() {
          // 在组件实例进入页面节点树时执行
        },
        detached: function() {
          // 在组件实例被从页面节点树移除时执行
        },
      },
      //组件的函数
      methods: {
     	   // 组件所在页面的生命周期函数(Page里的onLoad(){},onShow(){},onShareAppMessage(){}或者自定义函数等等)
      },
      pageLifetimes: {
        show: function() {
          // 页面被展示
        },
        hide: function() {
          // 页面被隐藏
        },
        resize: function(size) {
          // 页面尺寸变化
        }
      }
    })
    

    json

    {
      "component": true
    }
    

    app.json

      "window": {
        "navigationBarBackgroundColor": "#39b54a",
        "navigationBarTitleText": "",//文字标题(加载页头时会浮现)
        "navigationStyle": "custom",//使用组件样式
        "navigationBarTextStyle": "white"
      },
      "usingComponents": {
        "cu-custom": "/colorui/components/cu-custom"//组件的路径
      },
    
    展开全文
  • k-component-page 基于k-component的页面组件
  • React中PureComponent和Component异同

    千次阅读 2019-01-09 21:17:59
    它们几乎完全相同,但是PureComponent通过propstate的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 所谓浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行...

        它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能

    • 所谓浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent的判断,帮我们做了本来应该我们在shouldComponentUpdate中做的事情。
    if (this._compositeType === CompositeTypes.PureClass) {
      shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
    }
    
    • 而本来我们做的事情如下,这里判断了state有没有发生变化(prop同理),从而决定要不要重新渲染,这里的函数在一个继承了Component的组件中,而这里this.state.person是一个对象,你会发现,在这个对象的引用没有发生变化的时候是不会重新render的(即下面提到的第三点),所以我们可以用shouldComponentUpdate进行优化,这个方法如果返回false,表示不需要重新进行渲染,返回true则重新渲染,默认返回true。
      shouldComponentUpdate(nextProps, nextState) {
        return (nextState.person !== this.state.person);
      }
    
    • 上面提到的某些情况下可以使用PureComponent来提升性能,那具体是哪些情况可以,哪些情况不可以呢?如下显示的是一个IndexPage组件,设置了一个stateisShow,通过一个按钮点击可以改变它的值,结果是:初始化的时候输出的constructorrender,而第一次点击按钮,会输出一次render,即重新渲染了一次,界面也会从显示false变成显示true,但是当这个组件是继承自PureComponent的时候,再点击的时,不会再输出render,即不会再重新渲染了,而当这个组件是继承自Component时,还是会输出render,还是会重新渲染,这时候就是PureComponent内部做了优化的体现。
    • 同理也适用于stringnumber等基本数据类型,因为基本数据类型,值改变了就算改变了。
    import React, { PureComponent } from 'react';
    
    class IndexPage extends PureComponent{
      constructor() {
        super();
        this.state = {
          isShow: false
        };
        console.log('constructor');
      }
      changeState = () => {
        this.setState({
          isShow: true
        })
      };
      render() {
        console.log('render');
        return (
          <div>
            <button onClick={this.changeState}>点击</button>
            <div>{this.state.isShow.toString()}</div>
          </div>
        );
      }
    }
    
    • 当这个this.state.arr是一个数组时,且这个组件是继承自PureComponent时,初始化依旧是输出constructorrender,但是当点击按钮时,界面上没有变化,也没有输出render,证明没有渲染,但是我们可以从下面的注释中看到,每点击一次按钮,我们想要修改的arr的值已经改变,而这个值将去修改this.state.arr,但是因为在PureComponent浅比较这个数组的引用没有变化所以没有渲染,this.state.arr也没有更新,因为在this.setState()以后,值是在render的时候更新的,这里涉及到this.setState()的知识。
    • 但是当这个组件是继承自Component的时候,初始化依旧是输出constructorrender,但是当点击按钮时,界面上出现了变化,即我们打印处理的arr的值输出,而且每点击一次按钮都会输出一次render,证明已经重新渲染,this.state.arr的值已经更新,所以我们能在界面上看到这个变化。
    import React, { PureComponent } from 'react';
    
    class IndexPage extends PureComponent{
      constructor() {
        super();
        this.state = {
          arr:['1']
        };
        console.log('constructor');
      }
      changeState = () => {
        let { arr } = this.state;
        arr.push('2');
        console.log(arr);
        // ["1", "2"]
        // ["1", "2", "2"]
        // ["1", "2", "2", "2"] 
        // ....
        this.setState({
          arr
        })
      };
      render() {
        console.log('render');
        return (
          <div>
            <button onClick={this.changeState}>点击</button>
            <div>
              {this.state.arr.map((item) => {
                return item;
              })}
            </div>
          </div>
        );
      }
    }
    
    
    • 下面的例子用扩展运算符产生新数组,使this.state.arr的引用发生了变化,所以初始化的时候输出constructorrender后,每次点击按钮都会输出render,界面也会变化,不管该组件是继承自Component还是PureComponent的。
    import React, { PureComponent } from 'react';
    
    class IndexPage extends PureComponent{
      constructor() {
        super();
        this.state = {
          arr:['1']
        };
        console.log('constructor');
      }
      changeState = () => {
        let { arr } = this.state;
        this.setState({
          arr: [...arr, '2']
        })
      };
      render() {
        console.log('render');
        return (
          <div>
            <button onClick={this.changeState}>点击</button>
            <div>
              {this.state.arr.map((item) => {
                return item;
              })}
              </div>
          </div>
        );
      }
    }
    
    • 上面的情况同样适用于对象的情况。

        PureComponent不仅会影响本身,而且会影响子组件,所以PureComponent最佳情况是展示组件

    • 我们让IndexPage组件里面包含一个子组件Example来展示PureComponent是如何影响子组件的
    • 父组件继承PureComponent,子组件继承Component时:下面的结果初始化时输出为constructorIndexPage renderexample render,但是当我们点击按钮时,界面没有变化,因为这个this.state.person对象的引用没有改变,只是改变了它里面的属性值所以尽管子组件是继承Component的也没有办法渲染,因为父组件是PureComponent,父组件根本没有渲染,所以子组件也不会渲染
    • 父组件继承PureComponent,子组件继承PureComponent时:因为渲染在父组件的时候就没有进行,相当于被拦截了,所以子组件是PureComponent还是Component根本不会影响结果,界面依旧没有变化
    • 父组件继承Component,子组件继承PureComponent时:结果和我们预期的一样,即初始化是会输出constructorIndexPage renderexample render,但是点击的时候只会出现IndexPage render,因为父组件是Component,所以父组件会渲染,但是
    • 当父组件把值传给子组件的时候,因为子组件是PureComponent,所以它会对prop进行浅比较,发现这个person对象的引用没有发生变化,所以不会重新渲染,而界面显示是由子组件显示的,所以界面也不会变化
    • 父组件继承Component,子组件继承Component时:初始化是会输出constructorIndexPage renderexample render,当我们第一次点击按钮以后,界面发生变化,后面就不再改变,因为我们一直把它设置为sxt2,但是每点击一次都会输出IndexPage renderexample render,因为每次不管父组件还是子组件都会渲染
    • 所以正如下面第四条说的,如果stateprop一直变化的话,还是建议使用Component,并且PureComponent的最好作为展示组件
    //父组件
    import React, { PureComponent, Component } from 'react';
    import Example from "../components/Example";
    
    class IndexPage extends PureComponent{
      constructor() {
        super();
        this.state = {
          person: {
            name: 'sxt'
          }
        };
        console.log('constructor');
      }
      changeState = () => {
        let { person } = this.state;
        person.name = 'sxt2';
        this.setState({
          person
        })
      };
      render() {
        console.log('IndexPage render');
        const { person } = this.state;
        return (
          <div>
            <button onClick={this.changeState}>点击</button>
            <Example person={person} />
          </div>
        );
      }
    }
    //子组件
    import React, { Component } from 'react';
    
    class Example extends Component {
    
      render() {
        console.log('example render');
        const { person } = this.props;
        return(
          <div>
            {person.name}
          </div>
        );
      }
    }
    

    若是数组和对象等引用类型,则要引用不同,才会渲染

    如果prop和state每次都会变,那么PureComponent的效率还不如Component,因为你知道的,进行浅比较也是需要时间

    若有shouldComponentUpdate,则执行它,若没有这个方法会判断是不PureComponent,若是,进行浅比较

    继承自Component的组件,若是shouldComponentUpdate返回false,就不会渲染了,继承自PureComponent的组件不用我们手动去判断propstate,所以在PureComponent中使用shouldComponentUpdate会有如下警告:

    IndexPage has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

    也是比较好理解的,就是不要在PureComponent中使用shouldComponentUpdate,因为根本没有必要



    作者:shuxiaotai
    链接:https://www.jianshu.com/p/c41bbbc20e65

    展开全文
  • Ionic中componentpage的区别

    千次阅读 2019-05-19 17:22:54
    转自:https://stackoverflow.com/questions/45279191/ionic-3-component-vs-page It may be the same from the Angular point of view, but Pages and Components have a different meaning in Ionic.In terms of ...

    转自:https://stackoverflow.com/questions/45279191/ionic-3-component-vs-page

    It may be the same from the Angular point of view, but Pages and Components have a different meaning in Ionic. In terms of Angular, both are just components, but in the context of Ionic, a Page is a component that will act as an entire view (it may have nested components); we see Ionic pages as a standalone concept. A component will be just part of a bigger component most of the time in Angular apps, so I guess that's the biggest difference with Pages.

    About when using Angular's lifecycle hooks, I like to use them when working in nested components, but I prefer Ionic lifecycle hooks when working on pages. Mostly because things like ionViewWillEnter doesn't make too much sense in the context of a simple component, where ngOnInit does. That being said, I also used some Angular lifecycle hooks on Pages, like the ngOnDestroy (I used it to remove all the subscriptions from a page when that page is going to be destroyed), but just like you said, ionViewWillUnload seems to be the right way to do it if we want to use Ionic's lifecycle hooks.

    I guess that most of the Ionic lifecycle hooks are more related to the way the user interacts with the page as a whole (will enter to a page, will leave from a page, can enter to a page, can leave from a page...) and Angular lifecycle hooks are more related to the different stages of the life of a single component (the inputs has been initialized, the change detector has checked if there were changes in this component, ...), which as you can see, may not be directly related to the user interaction at all, and usually are things that the user is not aware of.

    I'm pretty sure there isn't a rule about which approach is better, but the most important thing is consistency. I think it make sense to use Ionic lifecycle hooks in the components that are Pages, and use Angular lifecycle hooks inside of nested components, but you can use a different approach, as long as you do it consistently in the entire app.

     

    从Angular的角度来看可能是相同的,但Pages和Components在Ionic中有不同的含义。就Angular而言,两者都只是组件,但在Ionic的上下文中,Page是一个充当整个视图的组件(它可能有嵌套的组件);我们将Ionic页面视为一个独立的概念。在Angular应用程序中,组件大部分时间只是更大组件的一部分,所以我猜这是与Pages的最大区别。

    关于何时使用Angular的生命周期钩子,我喜欢在嵌套组件中使用它们,但在页面上工作时我更喜欢Ionic生命周期钩子。主要是因为像ionViewWillEnter这样的东西在一个简单组件的上下文中没有太多意义,ngOnInit就是这样。话虽这么说,我也在页面上使用了一些Angular生命周期钩子,比如ngOnDestroy(我用它来删除页面上的所有订阅,当该页面将被销毁时),但就像你说的那样,ionViewWillUnload似乎是如果我们想要使用Ionic的生命周期钩子,那么正确的方法。

    我想大多数Ionic生命周期钩子与用户与页面整体交互的方式更相关(将进入页面,将离开页面,可以进入页面,可以从页面离开.. 。)和Angular生命周期钩子与单个组件的生命周期的不同阶段(输入已经初始化,变化检测器检查了这个组件是否有变化,……)有更多相关性,正如你所看到的那样,可能根本不与用户交互直接相关,通常是用户不知道的事情。

    我很确定没有关于哪种方法更好的规则,但最重要的是一致性。我认为在作为Pages的组件中使用Ionic生命周期钩子是有意义的,并且在嵌套组件中使用Angular生命周期钩子,但是只要在整个应用程序中一致地执行它,就可以使用不同的方法。

    展开全文
  • 今天遇到了一个问题是关于pagecomponent的小细节问题 对于新手小白来说,这些小小细节不懂出了问题直接就over了 这两个的区别是有的 前言 template模板与component组件区别 template模块与component组件,是小程序...
  • pages的页面使用components的组件 1、在components写好组件c-test 2、在要使用组件页面的.json文件命名组件名字,输入组件路径 3、在要使用组件页面的.wxml文件调用组件 json文件,命名+路径 { ...
  • zk基础概念之component,page,desktop

    千次阅读 2008-09-07 10:48:00
    component,page,desktop,window的关系比较:Component is an UI object, such as a label, a button and a tree.Page is a collection of a components.Desktop is a collection of pages for serving the same URL...
  • 在做小程序diy,前端返回了bannList(轮播图),如果linkRadio=1,则跳转systemLink里面的url,如果linkRadio=2,则跳转h5Link链接,(轮播图是自定义的组件),如何进行判断跳转,请各位大神指点下!...
  • 微信小程序主要基于数据绑定来处理 js wxml 之间的数据传输,虽然这样有很多便利性,但是有时候也是蛮不方便的。今天遇到调用组件方法的问题,其实非常简单,最关键是一个 selectComponent('#component-id'); 的...
  • http://camel.apache.org/direct.html Direct Component The direct: component provides direct, synchronous invocation of any consumers when a producer sends a message exchange. This endpoint can be us
  • component 动态组件 is属性 何为动态组件? 动态组件:多个组件使用同一个挂载点,并动态切换 必要条件: 组件标签使用: <component></component> 动态绑定使用 is 特性 v-bind:is="" <div id...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 126,633
精华内容 50,653
关键字:

componentpage和