一个组件的显示状态可以由内部状态state、外部参数props所决定。

props:

  1、props 是从外部传进组件的参数,主要是父组件向子组件传递数据。

  2、props 对于使用它的组件来说是只读的。要想修改props,必须通过父组件修改。所以子组件的props 通常是父组件的state。

  3、默认值

    为了组件的健壮性,在传入props 的时候常给默认值。

const SubComponent=(props)=> {
return (<h1>{props.name}</h1>)
}
SubComponent.defaultProps = {
name: 'Rain_tdk'
};
export default SubComponent

  4、为开发方便我们需要对props 的数据类型进行检验

import PropTypes from 'prop-types';
const SubComponent=(props)=> {
return (<h1>{props.name}</h1>)
}
SubComponent.defaultProps = {
name: 'Rain_tdk'
};
SubComponent.propTypes = {
name: PropTypes.string
};
export default SubComponent

  更多检验参考 :https://www.jianshu.com/p/2896acb5746b

state:

  1、state是React组件中的私有对象,用于控制这个组件本身的状态

  2、setState()采用merge的方式修改state。setState会重新调用render()刷新UI,直接通过this.state=‘xxx’的方式也会修改state但是不会重新渲染。

   注:setState({...newState})当state为Object、Arrary 时diff 比较的是引用,不会刷新UI 。需要使用 concat /slice /...运算符等产生新引用的方法。

  3、应用场景:

      大部分组件的工作应该是从props里取数并渲染出来,但是当需要 用户输入、服务器请求、延定时变化 等作出响应。

      通常在有状态state的组件中处理用户交互逻辑,并通过props传递给子组件(通常为无状态组件)中。

  4、那些属性应该用state

      state 中应该保存可能被事件处理器改变并触发用户页面更新的数据。

  5、哪些属性不应该存储在state中

      5-1、计算所得数据。计算数据应该在render()中实现,如果存储在state中需要手动更新state 比较麻烦

      5-2、基于props 的重复数据。组件中应该保持props为唯一的数据来源,除非需要知道历史数据是啥。

      5-3、不要将React组件保存在state中。在render()里使用props、state来创建他。

  总结:state让你修改(不修改的数据别往state存)。props不让你修改。多个state、props共同影响UI 的时在render()中实现。

  

React state和props使用场景的更多相关文章

  1. React.js 小书 Lesson12 - state vs props

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson12 转载请注明出处,保留原文链接和作者信息. 我们来一个关于 state 和 props 的 ...

  2. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  3. react基础语法(五) state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. React中的state与props的再理解

    props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...

  5. React中的State与Props

    一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...

  6. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...

  7. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  8. React & update state with props & Object.assign

    React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...

  9. React应用程序设计过程中如何区分模块到底是state还是props?

    根据官方文档,满足以下任意条件的模块,就不是State,原文如下: 1.Is it passed in from a parent via props? If so, it probably isn’ ...

随机推荐

  1. 开头不讲"Hello Word",读尽诗书也枉然 : Word 操作组件介绍 - Spire.Doc (转)

      [原文地址]http://www.cnblogs.com/liqingwen/p/5898368.html 序 本打算过几天简单介绍下组件 Spire.XLS,突然发现园友率先发布了一篇,既然 x ...

  2. Tomcat使用shutdown.bat关闭会将其他Tomcat关掉的问题

    Tomcat使用shutdown.bat关闭会将其他Tomcat关掉的问题 shutdown.bat文件有一句if not "%CATALINA_HOME%" == "& ...

  3. 逆元知识普及(扫盲篇) —— from Judge

    watch out 本文是博主的 csdn 上搬过来的,格式有点崩,看不下去的可以去 博主的 csdn上看(上面 格式会好很多,并且有些公式也用 $\LaTeX$  update 上去了) 最近有点颓 ...

  4. Allowed memory size of 134217728 bytes exhausted

    错误信息: Allowed memory size of 134217728 bytes exhausted (tried to allocate 65015808 bytes) 由于报错信息和数据库 ...

  5. 漫画:一招学会TCP的三次握手和四次挥手

    TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一.很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答. 本篇尝试使用动画来对这个知识点进行讲解,期望读者们可以更加简单地 ...

  6. 在django中uwsgi的使用,以及安装

    首先了解wsgi是一个python web服务器,uwsgi实现了wsgi所有的功能,性能稳定,效率高的服务器: 1.安装uwsgi pip install uwsgi 2.配置uwsgi [uwsg ...

  7. set操作

    Set操作,Set集合就是不允许重复的列表 sadd(name,values) # name对应的集合中添加元素 scard(name) 获取name对应的集合中元素个数 sdiff(keys, *a ...

  8. WIN10远程连接,报错身份验证错误,要求的函数不受支持

    我电脑是win10系统,我办公时经常需要远程连接其他电脑.突然间远程连接时就开始报错以下错误,导致无法远程连接. 这可能是由于CredSSP加密Oracle修正. 解决方法: 运行 gpedit.ms ...

  9. js过滤html标签

    function deleteHtmlTag(str){ str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim ...

  10. 【spring】-- jsr303参数校验器

    一.为什么要进行参数校验? 当我们在服务端控制器接受前台数据时,肯定首先要对数据进行参数验证,判断参数是否为空?是否为电话号码?是否为邮箱格式?等等. 这里有个问题要注意: 前端代码一般上会对这些数据 ...