React中的-- 数据流

简介

React的组件简单理解起来其实就是一个函数,这个函数会接收propsstate作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在React中数据流向是单向的,由父节点流向子节点,如果父节点的props发生了改变,那么React会递归遍历整个组件树,重新渲染所有使用该属性的子组件。那么propsstate究竟是什么?它们在组件中起到了什么作用?它们之间又有什么区别和联系呢?接下来我们详细看一下。

Props

props其实就是properties的缩写,可以理解为组件的属性,你可以使用props给组件传递任意类型的数据(操作起来就像我们在HTML标签内部定义某些自定义属性一样),也可以添加事件处理器,例:

//定义属性变量和事件处理方法var myDefineProps = [{ name : "first prop" }];var clickHandler = function(){
    ...
}// 直接设置props<MyComponent myDefineProps = { myDefineProps }  onClick = { clickHandler } />

这里还允许我们使用组件的一个实例方法setProps来设置组件的props,但是需要注意的是,必须在子组件上或者组件树外调用setProps,切勿在组件内部调用this.setProps,例:

var myDefineProps = [{ name : "first prop" }];var myComponent = React.render({
    <MyComponent />,    document.querySelector("body")
});// 外部调用setProps设置propsmyComponent .setProps({ myDefineProps : myDefineProps  });

我们可以通过this.props来访问props,但绝对不可以通过这种方式去修改props(理解为this.prop是只读的即可),一个组件绝对不可以自己修改自己的props。我们还可以通过propType去约束规范prop的类型,可以通过getDefaultProps方法设置prop的默认值。(可参见我的上一篇笔记)

State

state是用来描述组件视图状态的。其与props的区别在于,state是随着用户交互而产生变化的状态,props一旦定义就不再发生改变,例:

var SecondComponent= React.createClass({ 
    getInitialState : function() { 
        return {liked : false}; 
    }, 
    handleClick : function(event) { 
        this.setState({liked : !this.state.liked}); 
    }, 
    render : function() { 
        var text = this.state.liked ? 'like' : 'haven\'t liked'; 
        return ( <p onClick = {this.handleClick}> You {text} this. Click to toggle. </p> ); 
    }
});
ReactDOM.render( <SecondComponent />, document.querySelector("body"));

上例中 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,this.setState的每次调用都会触发 this.render 方法,进而再次渲染组件。

注意:不可直接修改 this.state,要通过 this.setState 去修改。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GreenLeaves

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数...

2316
来自专栏HT

基于HTML5 Canvas 点击添加 2D 3D 机柜模型

今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单,实际上结合了数据模型中...

2588
来自专栏静默虚空的博客

jQuery 事件

什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 ...

2227
来自专栏一个会写诗的程序员的博客

JQuery中bind和unbind函数

测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="c...

1662
来自专栏www.96php.cn

Discuz后台常用函数详解

当您在编写后台时,需要对几个常用后台显示函数进行详细的了解  下面的函数讲解按照重要性、常用性进行排序 目录 ---- showsetting()表单显示  c...

7215
来自专栏天天

js事件对象相关随记

1253
来自专栏前端说吧

Css中Position定位属性与层级关系

3015
来自专栏林德熙的博客

win10 UWP 圆形等待

使用 RectangleStyle1 在 Rectangle 使用 style="{StaticResource RectangleStyle1}"

882
来自专栏陈纪庚

HTML5 drag和drop的亲手实践

最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序。因此,这阵子就看了一下网上的一些drag和drog的文章以...

1143
来自专栏大前端_Web

Vue与React的异同-组件(二)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1332

扫码关注云+社区

领取腾讯云代金券