JS每日一题：react中类组件和函数式组件中有什么不同?

Java_oldboy 发布于2019-08-26 13:32 / 1030人阅读

摘要：期中类组件和函数式组件中有什么不同在中创建组件的形式有三种纯函数式定义的无状态组件定义的组件定义的组件今天我们要聊的是纯函数式定义的无状态组件及类组件的到底有什么不同分别在什么场景下适合使用首先我们来看一下用上述方法如何来创建一个组件定义的

20190306期

react中类组件和函数式组件中有什么不同?

在react中创建组件的形式有三种

纯函数式定义的无状态组件

React.createClass 定义的组件

Extends React.Component 定义的组件

今天我们要聊的是纯函数式定义的无状态组件及类组件的到底有什么不同, 分别在什么场景下适合使用

首先我们来看一下用上述方法如何来创建一个组件

Extends React.Component 定义的组件

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.initialValue || "placeholder"
        };
        // 手动绑定this
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        return (
            
                
            
        );
    }
}
Demo.propTypes = {
    initialValue: React.PropTypes.string
}

纯函数式定义的无状态组件

纯函数组件的特点:

组件不会被实例化,整体渲染性能得到提升

组件不能访问this对象

组件无法访问生命周期的方法

无状态组件只能访问输入的props,无副作用

function DemoComponent(props) {
  return Hello {props.name}
}
ReactDOM.render(, mountNode)

使用场景

以类形式创建的组件不用多说，该怎么用还怎么用, 这里说一纯函数组件, 纯函数组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件

总结

react中有三种创建组件的形式

纯函数不会被实例化，不能访问this，没有生命周期

尽可能的使用纯函数拆分复杂型组件

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器 GPU云服务器函数式组件组件和组件通信 js组件 js 组件框架

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

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

JS每日一题：什么情况下适合使合vuex？Vuex使用中有几个步骤？

摘要：什么情况下适合使合使用中有几个步骤开始之前先简单了解一下定义是一个状态管理机制采用集中式存储应用所有组件的状态嗯，就是一句话能说明白的，没明白的，我们用代码再理解一下什么叫集中式式存储比如下面这段代码，同时需要用到，那么我们首先能想到就是在 20190121 什么情况下适合使合vuex？Vuex使用中有几个步骤？开始之前先简单了解一下vuex 定义: vuex是一个状态管理机制,采用...

wow_worktile 2019-08-23 15:22 评论0 收藏0
JS每日一题：react的生命周期有哪些？有什么需要注意的地方?

摘要：期的生命周期有哪些有什么需要注意的地方生命周期是什么这里不再累述了，有兴趣可以点这里的生命周期这里我们以为准先上一张图从图中我们可以看出来生命周期分为三个部分装载处理更新处理卸载处理英译过来叫做装备，装配的意思，在这里我们理解为应用加载的过 20190304期 react的生命周期有哪些？有什么需要注意的地方? 生命周期是什么这里不再累述了，有兴趣可以点这里 react的生命周期这里...

seanHai 2019-08-23 15:40 评论0 收藏0
React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
JS每日一题：小程序跳转页面有几种方式？有什么不同?

摘要：小程序跳转页面有几种方式有什么不同在小程序中每个页面可以看成是一个，全部以栈的形式进行管理最多五层在说跳转方式之前我们先来温习一下栈和堆的区别管理方式不同栈是系统编译器启动管理，不需要程序员手动管理堆的释放由程序员手动管理，不及时回收容易产 20190228 小程序跳转页面有几种方式？有什么不同? 在小程序中每个页面可以看成是一个pageModel，pageModel全部以栈的形式进...

googollee 2019-08-23 15:35 评论0 收藏0
JS每日一题：函数式编程中代码组合(compose)如何理解?

摘要：期函数式编程中代码组合如何理解定义顾名思义，在函数式编程中，就是将几个有特点的函数拼凑在一起，让它们结合，产生一个崭新的函数代码理解一个将小写转大写的函数一个在字符后加的函数将两个函数组合起来这里假设我们实现了每日一题每日一题显示结果里上面 20190315期函数式编程中代码组合(compose)如何理解? 定义: 顾名思义，在函数式编程中，Compose就是将几个有特点的函数拼凑在...

Kaede 2019-08-23 16:08 评论0 收藏0