react props与render成员函数
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成员函数的更多相关文章
- 8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系
一. PropTypes 与 DefaultProps 官方文档 1. PropTypes 属性校验 引入 PropTypes import PropTypes from 'prop-types'; ...
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- react 实现pure render的时候,bind(this)隐患
react 实现pure render的时候,bind(this)隐患 export default class Parent extends Component { ... render() { c ...
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- Go结构体实现类似成员函数机制
Go语言结构体成员能否是函数,从而实现类似类的成员函数的机制呢?答案是肯定的. package main import "fmt" type stru struct { testf ...
- C++点滴----关于类常成员函数
关于C++中,类的常成员函数 声明样式为: 返回类型 <类标识符::>函数名称(参数表) const 一些说明: 1.const是函数声明的一部分,在函数的实现部分也需要加上const ...
- 为什么 C++ 中成员函数指针是 16 字节?
当我们讨论指针时,通常假设它是一种可以用 void * 指针来表示的东西,在 x86_64 平台下是 8 个字节大小.例如,下面是来自 维基百科中关于 x86_64 的文章 的摘录: Pushes a ...
随机推荐
- 关于网站的一些js和css常见问题的记录
1. 文字超过宽度,给这个后面超过的文字用...来表示 white-space: nowrap;
- sha-hmac
MAC----message authentication code,保证数据完整性的一个技术. HMAC类似于标准的sha运算,只是对于生成的mac增加了基于key的密钥保护. 生成的mac值,随着 ...
- 轻量级集群管理软件-Ansible
ansible概述和运行机制 ansible概述 Ansible是一款为类Unix系统开发的自由开源的配置和自动化工具, 它用Python写成,类似于saltstack和Puppet,但是有一个不同 ...
- C++ STL stack 用法
Stack(栈)是一种后进先出的数据结构,也就是LIFO(last in first out) ,最后加入栈的元素将最先被取出来,在栈的同一端进行数据的插入与取出,这一段叫做“栈顶”. 使用STL的s ...
- vue中样式的典型操作(:class,:style)
<template> <div class="home-wrapper"> <div class="home-top">th ...
- Windbg程序调试系列4-Live Debugging
上篇博文中给大家分享了使用Windbg分析线程阻塞问题: Windbg程序调试系列3-线程阻塞问题 本篇中我们继续,跟大家分享附加进程实时调试-Live Debugging. 先说一下使用Windbg ...
- cookie,localStorage和sessionStorage的区别
cookie已经很久没有用过了,一直觉得session Storage和local Storage更加好用一些.
- Python 第八阶段 学习记录之---算法
算法(Algorithm): 一个计算过程, 解决问题的方法 1.递归的两个特点 - 调用自身 - 结束条件 时间复杂度 - 时间复杂度是用来估计算法运行时间的一个式子(单位) - 一般来说,时间复杂 ...
- 通过Shell脚本将VSS项目批量创建并且提交迁移至Gitlab
脚本运行环境:Git Bash 系统环境:Windows 10 Pro 1709 VSS版本:Microsoft Visual SourceSafe 2005 我的VSS工作目录结构如下: D:\wo ...
- 使用GoldenGate EVENTACTIONS执行数据的实时触发和定制化
Oracle GoldenGate不仅可以在线实时同步数据(包括增量和存量),也内置有一套事件触发流程,允许用户根据某张表某条记录的某个特殊字段值,触发相应的自定义执行流程,比如接收到某个银行账号的大 ...