props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点。属性初值通常由React.createElement函数或者JSX中标签的属性值进行传递,并合并到组件实例对象的this.props中。事实上,组件接受静态信息的主要渠道就是props属性。

比如:

 var HelloBox = React.createClass({

      render() {

      return <div>{'Hello'+this.props.myattr }</div>;

      }
    })     React.render(<HelloBox myattr = "world" />,mountNode);

  或者

  

React.render(

    React.createElement(

      HelloBox,

      {myattr:‘world’}

    ),

    mountNode
   );

    props中也会包含一些由React自动填充的数据,this.props.children数组中会包含本组件实例的所有子组件,由React自动填充。另外,还能通过配置实现this.props.context跨级包含上级组件的数据等。

此外,props与state的区别体现在,props不能被所在组件修改,从父组件传进来的属性不会在组件内部更改;state只能在所在组件内部更改,或在外部调用setState函数间接修改状态。



render函数

  render主要流程是检测this.props和this.state,再返回一个单一组件实例,也可以返回null或者false表明不需要渲染任何东西,对应的React渲染一个<noscript>标签来处理。当返回null或false的时候,this.getDOMNode()将返回null。

render函数应该是纯粹的,也就是说,在render函数内不应修改组件state,不读写DOM信息,也不与浏览器交互,比如调用setTimeout就是一种与浏览器的交互。如果确实要与浏览器交互,componentDidMount()中或者其他生命周期方法中设置。

  React组件只能渲染单个根节点。如果想返回多个节点,它们必须被包含在同一个父节点中。

react props与render成员函数的更多相关文章

  1. 8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系

    一. PropTypes 与 DefaultProps 官方文档 1. PropTypes 属性校验 引入 PropTypes import PropTypes from 'prop-types'; ...

  2. 使用React.Fragment替代render函数中div的包裹

    1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...

  3. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  4. react 实现pure render的时候,bind(this)隐患

    react 实现pure render的时候,bind(this)隐患 export default class Parent extends Component { ... render() { c ...

  5. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  6. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  7. Go结构体实现类似成员函数机制

    Go语言结构体成员能否是函数,从而实现类似类的成员函数的机制呢?答案是肯定的. package main import "fmt" type stru struct { testf ...

  8. C++点滴----关于类常成员函数

    关于C++中,类的常成员函数 声明样式为:   返回类型 <类标识符::>函数名称(参数表) const 一些说明: 1.const是函数声明的一部分,在函数的实现部分也需要加上const ...

  9. 为什么 C++ 中成员函数指针是 16 字节?

    当我们讨论指针时,通常假设它是一种可以用 void * 指针来表示的东西,在 x86_64 平台下是 8 个字节大小.例如,下面是来自 维基百科中关于 x86_64 的文章 的摘录: Pushes a ...

随机推荐

  1. 安卓微信端打开H5页面背景图被键盘挤压移动位置解决

    问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...

  2. 《linux就该这么学》第十七节课:第18,19,23章,mariadb数据库、PXE无人值守安装系统和openldap目录服务。

    第23章 (借鉴请改动) openldap数据的特点:1.短小.2.读取次数较多 上述说明: openLDAP服务端配置:     1.yum install -y openldap openldap ...

  3. Redis.之.环境搭建(集群)

    Redis.之.环境搭建(集群) 现有环境: /u01/app/ |- redis # 单机版 |- redis-3.2.12    # redis源件 所需软件:redis-3.0.0.gem -- ...

  4. Wed Sep 19 20:48:46 CST 2018 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection mus

    Wed Sep 19 20:48:46 CST 2018 WARN: Establishing SSL connection without server's identity verificatio ...

  5. PYTHON装饰器用法及演变

    '''开放封闭原则: 软件一旦上线之后就应该满足开放封闭原则 具体就是指对修改是封闭的,对扩展是开放的装饰器:什么是装饰器:装饰就是修饰,器指的是工具装饰器本省可以是任意可调用的对象被装饰的对象也可以 ...

  6. elastic-job集成到springboot教程,和它的一个异常处理办法:Sharding item parameters '1' format error, should be int=xx,int=xx

    先说这个Sharding item parameters '1' format error, should be int=xx,int=xx异常吧,这是在做动态添加调度任务的时候出现的,网上找了一会没 ...

  7. 最新QT4.8+kernel_3.2.5+uboot_2010.06+tslib移植成功-问题小结

    2012-02-19 21:34:13 都是从源码下载然后自己修改,使用与TQ2440,之前uboot其实已经完成了.但是yaffs2没带起来.现在回头看来是很简单的了.bootargs参数中我设置成 ...

  8. 运用java反射机制获取实体方法报错,java.lang.NoSuchMethodException: int.<init>(java.lang.String)

    错误的原因是我的Student实体,成员变量数据类型,使用了int基本数据类型,改成Integer包装类型即可.

  9. centos 增强功能安装失败

    centos 共享目录设置失败 /sbin/mount.vboxsf: mounting failed with the error: No such device 准备安装增强功能 [root@lo ...

  10. PHP内核深入研究 - 数组及其遍历顺序

    事实上,广义上来讲,PHP就是C语言应用在Web上的一个模板,PHP中smarty模板用得比较多,就好比JSP是Java Servlet的模板一样(喔,对了,JSP中有个JSTL标签),复杂的模板语法 ...