04-state

react把组件看成是一个状态机,通过state去操作状态机(ps:突然想起这样写过轮播图2333);

在开发中通过与用户的交互实现不同的状态,然后渲染UI,让用户界面和数据保持一致;

在react中,只需更新组价的state,然后根据新的state重新渲染用户界面(不操作DOM)。只要state发生了改变,就会创建一个新的DOM树,和旧的DOM树进行对比,把有差异的地方更新掉,最终渲染到界面上。


class创建有state属性的组件


界面中可见state

在react中,不能直接改界面中的内容,要改state。因为改变state,会重新调用render方法。


this.setState状态改变引起界面改变

props和state:

props用来给组件传值,state在组件中定义状态,并在组件中用起来,通过状态的改变引起界面的改变。


props和state分开写


改变state


界面

props中的属性只能取用,也就是只读。props更多的是用在组件与组件之间的传值。


外界有传就用外界的

规范属性传进来的类型


固定写法

由于讲name设置为了number类型


浏览器虽渲染但报错

有时候需要某个属性必须传值


没有默认值


也不传值,但是设置了gender必须传


报错

但是如果有默认值,则不会报错。


1.在单组件中,props一般用于接收外部传入的数据,而state则用于记录组件内部数据,而且是需要经常改变的数据

2.state是组件内部的状态,不能够直接修改,必须要通过setState来改变值的状态,从而达到更新组件内部数据的作用

3.props更多是组件间传递数据的一种方式,props同样也可以传递state。由于react的数据是自上而下的,所以是从父组件向子组件进行传递,另外组件内部的this.props属性是只读的不可修改

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,550评论 1 33
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,091评论 0 1
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,346评论 0 9
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 2,584评论 1 13
  • 劲彪新闻客户端 昨天 20:06 · 《劲彪新闻》官方账号 2019年6月1日起,修订后的 《中华人民共和国公务员...
    _53e5阅读 220评论 0 1