React入门系列 - 4. 认识无状态组件

cgspine 发布于2019-08-26 18:09 / 2238人阅读

摘要：让他增加一个内部维持的状态另外有一点需要注意，由于是无状态组件，所以，无论是否变更，都会重新刷新这个组件。

4.1 什么是无状态组件

在开发React组件的时候，大家可能会遇到就是我使用的这个组件纯粹就是渲染使用，里面并没有自己的状态、方法、生命周期等等操作。

而为这种组件创建完整的实例有一种浪费机器性能的感觉。

那么，让我们来看看，如何创建一个easy react component。

新建一个文件noStateComponent.js，在里面写入如下代码:

import React from "react";

export default (props)=>{props.name}

接着修改index.js文件，导入这个无状态组件

import React, { PureComponent } from "react";
import Content from "./content.js"
import NoStateComponent from "./noStateComponent"
export default class index extends PureComponent {
  ...
  render() {
    return (
      
        Hello world React!{this.state.name}
        组件生成时间:{this.state.time}
        {this.state.obj.join("
")}
        
        主体Children
        
        
      
    );
  }
}

刷新浏览器，你会看到无状态组件成功渲染在界面上。

当然并不是无状态组件无法使用内部状态，我们修改一下无状态组件。让他增加一个内部维持的状态

import React from "react";

export default function(props){
    let lastTime = +new Date()
    return {props.name},lastTime:{lastTime}
}

另外有一点需要注意，由于是无状态组件，所以，无论props是否变更，都会重新刷新这个组件。请看以下代码

import React from "react";

export default function(props){
     let lastTime = +new Date()
     return {props.name},lastTime:{lastTime}
}

export default class Index extends React.PureComponent{
    constructor(props){
        super(props)
    }
    render () {
        let lastTime = +new Date()
        return {this.props.name},lastTime:{lastTime}
    }
}

我们继承的是React新的PureComponent，这个方法会自动对数据进行浅层对比。

你可以通过注释上面两个export你会发现，点击按钮之后，如果是无状态组件，那么它将跟随变动而刷新。
如果是继承PureComponent的，则没有任何改变。

reflink:https://www.yodfz.com/detail/...

云服务器私有云系列4 react-router4 入门系列课程深度学习入门系列课程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110164.html

React入门系列 - 3 state与props

摘要：而主要被设计用于维持组件内部私有状态。初始化初始化需要在中进行。对于的定义为请求修改某个数据，而的实现则是将对变量的修改放入一个修改队列中，在一个循环之后进行批量更新结果深入点涉及的更新机制。推出了与版本之后推出来的就是为了解决这些问题的。 3.1 什么是state 我们要认识到，React中的组件其实是一个函数，所以state是函数内部的私有变量，外部其他组件或者方法都是无法直接访问...

henry14 2019-08-23 14:38 评论0 收藏0
库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
React 深入系列２：组件分类

摘要：无状态组件和有状态组件无状态组件和有状态组件，划分依据是根据组件内部是否维护。展示型组件和容器型组件展示型组件和容器型组件，划分依据是根据组件的职责。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列2：组件分类 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使...

Karrdy 2019-08-22 16:05 评论0 收藏0
React 深入系列2：组件分类

摘要：无状态组件和有状态组件无状态组件和有状态组件，划分依据是根据组件内部是否维护。展示型组件和容器型组件展示型组件和容器型组件，划分依据是根据组件的职责。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 组件有很多种分类方式，常见的分类方式有函数组件和类组件，无状态组件和有状态组件...

fizz 2019-08-22 17:26 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0