简述React中无状态组件和有状态组件的区别

2018-10-23 admin

React中的组件主要分为无状态组件和有状态组件两类。

1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性,以便于组件复用。创建无状态组件如下:

var Header = (props) = (
    <div>{props.xxx}</div>
);

2,有状态组件主要用来定义交互逻辑和业务数据(如果用了Redux,可以把业务数据抽离出去统一管理),使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上(有状态组件也可以叫做容器组件,无状态组件也可以叫做展示组件),然后传递props到展示组件,展示组件接收到props,把props塞到模板里面。创建有状态组件如下:

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <Header/>  //也可以写成<Header></Header>
        )
    }
}

这个是官方默认的写法,在构造函数里面默认要传递一个参数进去,并且要调用super()方法,来获取子类的实例。但是比较疑惑的地方是为什么要传递这些参数,传递这些参数有什么用?

因为从render()里面的组件来看,构造函数不传递参数也可以获取到组件实例上的props属性。如下:

class Home extends React.Component {
    constructor() {
        super();
    };
    render (){
        return(
            <div>
                <Header name="俺是子组件实例上props属性"/>
            </div>
        );
    };
};
class Header extends React.Component {
    constructor() {
        super();
    };
    render() {
        return (
            <div>{this.props.name}</div>  //构造函数中并没有传递props属性,这里通过{this.props.name}依然获取到了值
        );
    };
};

这个比较好理解,因为render()方法是子组件原型上的方法,获取实例属性的时候要通过this来访问,如果去掉this就获取不到了。

那问题来了,如果我们要在构造函数中访问props改怎么办呢?此时,我们就要在constructor构造函数中传递一个props参数,这样就可以访问到子组件实例上的props属性了。如下:

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性,赋值给实例属性name
    };
    render() {
        return (
            <div>{this.name}</div>
        );
    };
};

还有一个问题,super(props)方法中为什么也要传递一个props属性呢?看下面的例子:

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nameOne: props.name,
            nameTwo: this.props.name  //super()方法中传递了props属性,this.props才可以获取到name属性
        }
    };
    render() {
        return (
            <div>{this.state.nameOne}{this.state.nameTwo}</div>
        );
    };
};

其实,props.name和this.props.name的值都是一样的,但是它俩还是有区别的,props.name中这个props就是子组件的属性props,但是this.props.name中的这个props却不是子组件的属性props,虽然值都是一样的,这个props其实在调用super方法的时候被传递到了Component这个父类中去了,所以this.props.name获取到的是Component父类中的props属性。看下React的源码:

图片描述

发现没,子类super方法把props参数传递给了父类Component,Component把props参数挂载到它的实例属性props上了。所以,你只有给super方法中传递props参数,在构造函数里才能用this,props.xxx

如果super方法中不传递props参数,获取this.props.name的值就会报错。获取this.props显示为undifined:如下:

class Header extends React.Component {
    constructor(props) {
        super();
        this.state = {
            nameOne: this.props.name, 
            nameTwo: this.props  
        };
        console.log(this.props.name);  //报错
        console.log(this.props);  //undifined
    };
    render() {
        return (
            <div>{this.state.nameOne}{this.state.nameTwo}</div>
        );
    };
};

这种写法本质是给子组件Header的实例属性state.nameOne和state.nameTwo赋值了一个子组件Header的实例属性props,简单来说,就是Header子组件创建了一个state属性,然后又把自己的props属性赋值给了自己的state属性。 为什么this.props打印出undefined?因为props是调用子组件的时候传入的参数,所以在构造函数内部是访问不到props的,那么对于this.props.name来说,毫无疑问肯定报错。

所以,对与构造函数中的props参数和super中的props参数来说,如果你不在构造函数中用this.props和props,完全可以不用传参。反之就要传参。但是对于this.props和props来说获取到的值都是一样的,所以写哪个都可以。但是官方文档上是两个参数都有写。所以为了严谨,还是都写上吧。

但是,我个人还是喜欢这样的写法。

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

不加this的是value,加了this的是key。

原文链接:https://segmentfault.com/a/1190000016774551

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43465.html

文章标题:简述React中无状态组件和有状态组件的区别

相关文章
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰杞, Arial, sans-serif &quot;&gt;2014骞达杞浠惰杩瑷灞涓┓锛互婊¤冻ㄦ涓姹浜...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
回到顶部