React 内部属性与函数
constructor
- 构造函数,在创建组件的时候调用一次。
- 例子:
class TodoList extends React.Component { constructor(props, context){ super(props) } }
getInitialState
- 在组件挂载之前调用一次。返回值将会作为
this.state
的初始值。 - 例子
React.createClass({ getInitialState: function() { return {liked: false}; }, render: function() { ... } });
getDefaultProps
- 在组件类创建的时候调用一次,然后返回值被缓存下来。
- 如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到
this.props
(使用in
检测属性)。 - 该方法在任何实例创建之前调用,因此不能依赖于
this.props
。另外,getDefaultProps()
返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。 - 例子
React.createClass({ getDefaultProps: function() { return {liked: false}; }, render: function() { ... } });
propTypes
- 组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。组件类的
PropTypes
属性,就是用来验证组件实例的属性是否符合要求 - 例子
React.createClass({ propTypes: { optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 所有可以被渲染的对象:数字,字符串,DOM 元素或包含这些类型的数组。 optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定形状参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 以后任意类型加上 `isRequired` 来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } } });
ref
- 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,只有当它插入文档以后,才会变成真实的 DOM 。
- 所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上
- 需要从组件获取真实 DOM 的节点,这时就要用到
ref
属性 - 例子
<input type="text" ref="myTextInput" /> this.refs.myTextInput.focus();
this.props.children
- this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点
mixins
- 组件是 React 里复用代码最佳方式,但是有时一些复杂的组件间也需要共用一些功能。React 使用
mixins
来解决这类问题。 - 例子:一个简单的 mixin,使用
setInterval()
并保证在组件销毁时清理定时器。 - 关于 mixin 值得一提的优点是,如果一个组件使用了多个 mixin,并用有多个 mixin 定义了同样的生命周期方法(如:多个 mixin 都需要在组件销毁时做资源清理操作),所有这些生命周期方法都保证会被执行到。方法执行顺序是:首先按 mixin 引入顺序执行 mixin 里方法,最后执行组件内定义的方法。
var SetIntervalMixin = { componentWillMount: function() { this.intervals = []; }, setInterval: function() { this.intervals.push(setInterval.apply(null, arguments)); }, componentWillUnmount: function() { this.intervals.map(clearInterval); } }; var TickTock = React.createClass({ mixins: [SetIntervalMixin], // 引用 mixin getInitialState: function() { return {seconds: 0}; }, componentDidMount: function() { this.setInterval(this.tick, 1000); // 调用 mixin 的方法 }, tick: function() { this.setState({seconds: this.state.seconds + 1}); }, render: function() { return ( <p> React has been running for {this.state.seconds} seconds. </p> ); } }); React.render( <TickTock />, document.getElementById('example') );
statics
statics
对象允许你定义静态的方法,这些静态的方法可以在组件类上调用- 例子
var MyComponent = React.createClass({ statics: { customMethod: function(foo) { return foo === 'bar'; } }, render: function() { } }); MyComponent.customMethod('bar'); // true
React 内部属性与函数的更多相关文章
- Javascript高级程序设计——函数内部属性与函数属性
函数内部属性 函数内部有两个特殊的属性arguments和this.其中,arguments是类数组对象,包含传入函数中的所有值,这个arguments还有一个属性:callee,这个属性是一个指针, ...
- 通过表达式、函数给React组件属性赋值
一.需求 当有传属性name的值时,则显示Hello "name",否则显示Hello World 二.4种方式的代码实现 1.通过三元运算符 <!DOCTYPE html& ...
- Spark RDD概念学习系列之RDD的重要内部属性(十五)
RDD的重要内部属性 通过 RDD 的内部属性,用户可以获取相应的元数据信息.通过这些信息可以支持更复杂的算法或优化. 1)分区列表:通过分区列表可以找到一个 RDD 中包含的所有分区及其所在地址. ...
- Js基础知识5-函数返回值、函数参数、函数属性、函数方法
函数返回值 所有函数都有返回值,没有return语句时,默认返回内容为undefined,和其他面向对象的编程语言一样,return语句不会阻止finally子句的执行. function testF ...
- js中的内部属性与delete操作符
本文正式地址:http://www.xiabingbao.com/javascript/2015/08/03/javascript-delete-configurable 在讲解Configurabl ...
- es6之Object扩展及内部属性的总结
对象扩展: 1.Object.is(A,B) :比较两个值是否相等,取代===运算:只要值相等代表相等:其中NAN和NAN相等:+0和-0不相等: 2.Object.assign(target,sou ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- 内部属性[[class]]
1. 对象的[[class]]属性 所有typeof返回值为“object”的对象(如数组)都包含一个内部属性[[class]],这个属性无法直接访问,一般通过Object.prototype.toS ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...
随机推荐
- ObjectARXWizards & AutoCAD .NET Wizards 下载地址
Autodesk Developer Network ObjectARX Wizards The ObjectARX Wizards for AutoCAD 2016 for Visual Stud ...
- Leetcode 520. Detect Capital 发现大写词 (字符串)
Leetcode 520. Detect Capital 发现大写词 (字符串) 题目描述 已知一个单词,你需要给出它是否为"大写词" 我们定义的"大写词"有下 ...
- 改变iOS app的icon(iOS10.3)
原文 改变iOS app的icon官方iOS10.3新增了可以让开发者去更改app的icon,接下来看看怎么更改.官方API给的东西很少,只是介绍了一个实例方法: 1 open func setAlt ...
- atcoder 2643 切比雪夫最小生成树
There are N towns on a plane. The i-th town is located at the coordinates (xi,yi). There may be more ...
- 基础线程机制--Executor线程池框架
基础线程机制 Executor线程池框架 1.引入Executor的原因 (1)new Thread()的缺点 每次new Thread()耗费性能 调用new Thread()创建的线程 ...
- 使用css实现垂直居中
vartical-align vartical-align可以设置行内元素和表格单元格(table-cell)垂直对方式,所以如果元素是行内元素或者表格的话,可以直接应用这个属性对内容进行对齐设置.如 ...
- Linux系统之ssh命令
ssh命令用于远程登录上Linux主机. 常用格式:ssh [-l login_name] [-p port] [user@]hostname更详细的可以用ssh -h查看. 不指定用户: ssh 1 ...
- react 中文文档案例五 (循环列表)
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...
- bcb6重启应用程序
在工程的cpp文件中WinMain还是得最后添加如下的代码(其中g_blsRunAgain为bool类型的全局变量,在需求重启的时候先将g_blsRunAgain置为true,再将程序关闭,之后就会重 ...
- 2.Servlet(一)
1.Servlet的编写.访问过程: (1)编写部署Servlet程序: 编写源文件->编译类文件->部署程序->运行->Servlet处理请求,返回响应. (2)Eclips ...