您的位置：首页 > Web前端 > React

React 定义组件参数

2016-12-12 15:23 411 查看
React（28） 


目录(?)[-]
1 组件的定义
2 定义组件的参数
21 渲染组件render
22 调试输出displayName
23 跨组件共享mixins
24 验证对象propTypes
25 静态方法对象statics

3 定义组件的参数-生命周期
31 创建期getDefaultProps
32 创建期getInitialState
33 创建期componentWillMount
34 创建期componentDidMount
35 存在期componentWillReceiveProps
36 存在期shouldComponentUpdate
37 存在期componentWillUpdate
38 存在期componentDidUpdate
39 销毁清理期componentWillUnmount

原文地址：http://itbilu.com/JavaScript/React/4JIk-Q7Yl.html

使用
React.createClass()
方法创建组件时，需要传入一个参数对象，React会根据这个对象创建组件。这个参数对象中，除了包含必须要实现的
render
方法外，还有一些组件的设置属性。组件生命周期中的一些处理函数，也是在这个对象中定义的。

组件的定义
定义组件的参数
2.1 渲染组件：
render

2.2 调试输出：
displayName

2.3 跨组件共享：
mixins

2.4 验证对象：
propTypes

2.5 静态方法对象：
statics


定义组件的参数-生命周期
3.1 创建期：
getDefaultProps

3.2 创建期：
getInitialState

3.3 创建期：
componentWillMount

3.4 创建期：
componentDidMount

3.5 存在期：
componentWillReceiveProps

3.6 存在期：
shouldComponentUpdate

3.7 存在期：
componentWillUpdate

3.8 存在期：
componentDidUpdate

3.9 销毁&清理期：
componentWillUnmount



1. 组件的定义

我们在之前介绍过，定义一个组件，语法结构如下：
ReactClass createClass(object specification)


定义组件时，传了一个表示参数说明（参数规格）的
specification
对象。

如，定义一个组件：
var App = React.createClass({
displayName: 'App',
render: function () {
return (
<h1>itbilu.com</h1>
)
}
});

返回值是一个包含单一了级的组件（
ReactComponent
）

在上面的示例中，我们在
specification
对象中定义了一个
render
方法，该方法是必须实现的方法。除
render
方法外，还定义一个
displayName
属性。

specification
对象中还可以定义更多的属性，这其中包括组件的生命周期参数，参数详细说明如下。


2. 定义组件的参数


2.1 渲染组件：
render

ReactComponent render()

返回值：React组件（
ReactComponent
）

render()
方法会根据组件的
this.props
和
this.state
属性的改，渲染或重新渲染一个组件。React会对比其返回的
ReactComponent
，并判断是否将其渲染到DOM中。

其返回值是一个单子级的组件，该组件可以是虚拟的本地DOM（如：
<div/>
 或 
React.DOM.div()
），也可以是自定义的复合组件。当不需要返回任何东西时，可以返回
null
或
false
。

render()
应该是一个纯粹函数，即：不使用组件的
state
，每次调用都返回同样的结果，不读写DOM，不与浏览器交互，只做最单纯的渲染。当需要修改状态或有交互时，应该在
componentDidMount
等组件生命周期函数中进行。


2.2 调试输出：
displayName

string displayName


displayName
属性用于组件调试时输出显示，
JSX
自动设置该值，可以理解为调试时显示的组件名。


2.3 跨组件共享：
mixins

array mixins

mixin
属性是一个数组，通过该数组可以共享一些复杂组件间的共用功能。[/code]

如，一个组件需要定期更新，这时我们可以
setInterval()
方法很容易的做到，但当不需要它时，我们要取消定时器以节省内存。下面我们使用 React 提供的生命周期方法来通知组件创建或销毁时间，并结合
mixin
，实现组件的定时清理（mixins.html）：
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 已经运行了 {this.state.seconds} 秒。
</p>
);
}
});

React.render(
<TickTock />,
document.getElementById('example')
);



2.4 验证对象：
propTypes

object propTypes


propTypes
是React提供的一种验证机制，该对象中定义了一系列的验证方法，可对
props
进行验证。组件初始化时，如果传递的
props
属性和
propTypes
不匹配，则会打印一个
console.warn
日志。
React.createClass({
propTypes: {
// 验证布尔值
optionalBool: React.PropTypes.bool,
// 验证是一个函数
optionalFunc: React.PropTypes.func,
// 验证是数字
optionalNumber: React.PropTypes.number,
// 自定义验证器，验证失败需要返回一个 Error 对象。不要直接
// 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
//自定义的验证方法
……
}
// 其它验证
……
},
/* 其它specification... */
});


propTypes
使用示例（propTypes.html）：
var App = React.createClass({
propTypes: {
site: React.PropTypes.shape({
domain: React.PropTypes.string.isRequired,
name: React.PropTypes.string
}).isRequired
},
render: function() {
return (
<p>
站点信息－{this.props.site.name}：{this.props.site.domain}
</p>
);
}
});

var site = {
name: 4,  // 不合法的类型
domain: 'itbilu.com'
}
ReactDOM.render(
<App site={site} />,
document.getElementById('example')
);

// 运行后会抛出以下错误
// Warning: Failed propType: Invalid prop `site.name` of type `number` supplied to `App`, expected `string`.



2.5 静态方法对象：
statics

object statics


statics
对象使你可以定义一些静态方法，这些静态方法可以直接在组件上调用。如statics.html）：
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});

MyComponent.customMethod('bar');  // true


在
statics
中定义的方法都是静态方法，所以你可以组件实例创建之前调用，这也意味着不能获取组件的 在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的
props
和
state
，如果需要在静态方法中使用
props
和
state
，则要在调用时做为参数传入。


3. 定义组件的参数-生命周期

生命周期
相关参数，是React定义组件时提供的一系列处理函数（钓子函数），这些函数会在组件生命周期的某个阶段调用。


3.1 创建期：
getDefaultProps

object getDefaultProps()



3.2 创建期：
getInitialState

object getInitialState()


在组件挂载前（即：创建期）调用一次，其返回值将做为
this.state
的初始值。

getInitialState()
方法会组件类创建的时候调用一次，其返回值会被缓存下来。该方法用于设置
props
属性的默认值，但仅对于非必须属性。如果父组件没有指定
props
中的某个值，此返回对象中的相应属性将会合并到
this.props
。

getInitialState()
方法会在组件实例创建前调用，这时还不能使用
this.props
属性，且其返回对象是在所有实例间共享的。


3.3 创建期：
componentWillMount

componentWillMount()


componentWillMount()
服务器端和客户端都只调用一次，在初始化渲染执行之前被调用。如果在这个方法内调用
setState()
方法，
render()
方法将会收到更新后的
state
，也就是说这是我做在组件渲染前最后一个修改
state
的机会。


3.4 创建期：
componentDidMount

componentDidMount()


componentDidMount()
会在组件初始化（渲染完成）后立即调用一次，我们一般在这个方法中使用
this.getDOMNode()
方法访问原始DOM。


3.5 存在期：
componentWillReceiveProps

componentWillReceiveProps(object nextProps)


componentWillReceiveProps()
方法会在组件生命周期的存在期调用，当组件感知到
props
属性改变会，会调用此方法。
render()
方法将会在其后调用，这时我们可以通过
this.setState()
来阻止组件的再次渲染。


3.6 存在期：
shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)


shouldComponentUpdate()
方法发生在组件生命周期的存在器，在组件收到新的
props
或
state
。在这个方法中，我们可以访问组件的
props
和
state
属性，通过这两个属性可以确认组件是否需要更新，如果不需要更新，则返回
false
，则其后的方法将不会在执行。如：
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}



3.7 存在期：
componentWillUpdate

componentWillUpdate(object nextProps, object nextState)


componentWillUpdate()
会在收到新的
props
或
state
后调用，类似
componentWillMount()
。


3.8 存在期：
componentDidUpdate

componentDidUpdate(object prevProps, object prevState)


componentDidUpdate()
会在组件重新渲染后立即被调用，当我们需要在组件重新渲染后操作DOM则需要使用这个方法。


3.9 销毁&清理期：
componentWillUnmount

componentWillUnmount()


componentWillUnmount()
是组件
销毁&清理期
唯一调用的方法，它会在组件从DOM中移除时被调用，这时我们可以清理一些状态或清理在
componentDidMount
中创建的DOM元素。

React（28） 


目录(?)[-]
1 组件的定义
2 定义组件的参数
21 渲染组件render
22 调试输出displayName
23 跨组件共享mixins
24 验证对象propTypes
25 静态方法对象statics

3 定义组件的参数-生命周期
31 创建期getDefaultProps
32 创建期getInitialState
33 创建期componentWillMount
34 创建期componentDidMount
35 存在期componentWillReceiveProps
36 存在期shouldComponentUpdate
37 存在期componentWillUpdate
38 存在期componentDidUpdate
39 销毁清理期componentWillUnmount

原文地址：http://itbilu.com/JavaScript/React/4JIk-Q7Yl.html

使用
React.createClass()
方法创建组件时，需要传入一个参数对象，React会根据这个对象创建组件。这个参数对象中，除了包含必须要实现的
render
方法外，还有一些组件的设置属性。组件生命周期中的一些处理函数，也是在这个对象中定义的。

组件的定义
定义组件的参数
2.1 渲染组件：
render

2.2 调试输出：
displayName

2.3 跨组件共享：
mixins

2.4 验证对象：
propTypes

2.5 静态方法对象：
statics


定义组件的参数-生命周期
3.1 创建期：
getDefaultProps

3.2 创建期：
getInitialState

3.3 创建期：
componentWillMount

3.4 创建期：
componentDidMount

3.5 存在期：
componentWillReceiveProps

3.6 存在期：
shouldComponentUpdate

3.7 存在期：
componentWillUpdate

3.8 存在期：
componentDidUpdate

3.9 销毁&清理期：
componentWillUnmount



1. 组件的定义

我们在之前介绍过，定义一个组件，语法结构如下：
ReactClass createClass(object specification)


定义组件时，传了一个表示参数说明（参数规格）的
specification
对象。

如，定义一个组件：
var App = React.createClass({
displayName: 'App',
render: function () {
return (
<h1>itbilu.com</h1>
)
}
});

返回值是一个包含单一了级的组件（
ReactComponent
）

在上面的示例中，我们在
specification
对象中定义了一个
render
方法，该方法是必须实现的方法。除
render
方法外，还定义一个
displayName
属性。

specification
对象中还可以定义更多的属性，这其中包括组件的生命周期参数，参数详细说明如下。


2. 定义组件的参数


2.1 渲染组件：
render

ReactComponent render()

返回值：React组件（
ReactComponent
）

render()
方法会根据组件的
this.props
和
this.state
属性的改，渲染或重新渲染一个组件。React会对比其返回的
ReactComponent
，并判断是否将其渲染到DOM中。

其返回值是一个单子级的组件，该组件可以是虚拟的本地DOM（如：
<div/>
 或 
React.DOM.div()
），也可以是自定义的复合组件。当不需要返回任何东西时，可以返回
null
或
false
。

render()
应该是一个纯粹函数，即：不使用组件的
state
，每次调用都返回同样的结果，不读写DOM，不与浏览器交互，只做最单纯的渲染。当需要修改状态或有交互时，应该在
componentDidMount
等组件生命周期函数中进行。


2.2 调试输出：
displayName

string displayName


displayName
属性用于组件调试时输出显示，
JSX
自动设置该值，可以理解为调试时显示的组件名。


2.3 跨组件共享：
mixins

array mixins

mixin
属性是一个数组，通过该数组可以共享一些复杂组件间的共用功能。[/code]

如，一个组件需要定期更新，这时我们可以
setInterval()
方法很容易的做到，但当不需要它时，我们要取消定时器以节省内存。下面我们使用 React 提供的生命周期方法来通知组件创建或销毁时间，并结合
mixin
，实现组件的定时清理（mixins.html）：
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 已经运行了 {this.state.seconds} 秒。
</p>
);
}
});

React.render(
<TickTock />,
document.getElementById('example')
);



2.4 验证对象：
propTypes

object propTypes


propTypes
是React提供的一种验证机制，该对象中定义了一系列的验证方法，可对
props
进行验证。组件初始化时，如果传递的
props
属性和
propTypes
不匹配，则会打印一个
console.warn
日志。
React.createClass({
propTypes: {
// 验证布尔值
optionalBool: React.PropTypes.bool,
// 验证是一个函数
optionalFunc: React.PropTypes.func,
// 验证是数字
optionalNumber: React.PropTypes.number,
// 自定义验证器，验证失败需要返回一个 Error 对象。不要直接
// 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
//自定义的验证方法
……
}
// 其它验证
……
},
/* 其它specification... */
});


propTypes
使用示例（propTypes.html）：
var App = React.createClass({
propTypes: {
site: React.PropTypes.shape({
domain: React.PropTypes.string.isRequired,
name: React.PropTypes.string
}).isRequired
},
render: function() {
return (
<p>
站点信息－{this.props.site.name}：{this.props.site.domain}
</p>
);
}
});

var site = {
name: 4,  // 不合法的类型
domain: 'itbilu.com'
}
ReactDOM.render(
<App site={site} />,
document.getElementById('example')
);

// 运行后会抛出以下错误
// Warning: Failed propType: Invalid prop `site.name` of type `number` supplied to `App`, expected `string`.



2.5 静态方法对象：
statics

object statics


statics
对象使你可以定义一些静态方法，这些静态方法可以直接在组件上调用。如statics.html）：
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});

MyComponent.customMethod('bar');  // true


在
statics
中定义的方法都是静态方法，所以你可以组件实例创建之前调用，这也意味着不能获取组件的 在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的
props
和
state
，如果需要在静态方法中使用
props
和
state
，则要在调用时做为参数传入。


3. 定义组件的参数-生命周期

生命周期
相关参数，是React定义组件时提供的一系列处理函数（钓子函数），这些函数会在组件生命周期的某个阶段调用。


3.1 创建期：
getDefaultProps

object getDefaultProps()



3.2 创建期：
getInitialState

object getInitialState()


在组件挂载前（即：创建期）调用一次，其返回值将做为
this.state
的初始值。

getInitialState()
方法会组件类创建的时候调用一次，其返回值会被缓存下来。该方法用于设置
props
属性的默认值，但仅对于非必须属性。如果父组件没有指定
props
中的某个值，此返回对象中的相应属性将会合并到
this.props
。

getInitialState()
方法会在组件实例创建前调用，这时还不能使用
this.props
属性，且其返回对象是在所有实例间共享的。


3.3 创建期：
componentWillMount

componentWillMount()


componentWillMount()
服务器端和客户端都只调用一次，在初始化渲染执行之前被调用。如果在这个方法内调用
setState()
方法，
render()
方法将会收到更新后的
state
，也就是说这是我做在组件渲染前最后一个修改
state
的机会。


3.4 创建期：
componentDidMount

componentDidMount()


componentDidMount()
会在组件初始化（渲染完成）后立即调用一次，我们一般在这个方法中使用
this.getDOMNode()
方法访问原始DOM。


3.5 存在期：
componentWillReceiveProps

componentWillReceiveProps(object nextProps)


componentWillReceiveProps()
方法会在组件生命周期的存在期调用，当组件感知到
props
属性改变会，会调用此方法。
render()
方法将会在其后调用，这时我们可以通过
this.setState()
来阻止组件的再次渲染。


3.6 存在期：
shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)


shouldComponentUpdate()
方法发生在组件生命周期的存在器，在组件收到新的
props
或
state
。在这个方法中，我们可以访问组件的
props
和
state
属性，通过这两个属性可以确认组件是否需要更新，如果不需要更新，则返回
false
，则其后的方法将不会在执行。如：
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}



3.7 存在期：
componentWillUpdate

componentWillUpdate(object nextProps, object nextState)


componentWillUpdate()
会在收到新的
props
或
state
后调用，类似
componentWillMount()
。


3.8 存在期：
componentDidUpdate

componentDidUpdate(object prevProps, object prevState)


componentDidUpdate()
会在组件重新渲染后立即被调用，当我们需要在组件重新渲染后操作DOM则需要使用这个方法。


3.9 销毁&清理期：
componentWillUnmount

componentWillUnmount()


componentWillUnmount()
是组件
销毁&清理期
唯一调用的方法，它会在组件从DOM中移除时被调用，这时我们可以清理一些状态或清理在
componentDidMount
中创建的DOM元素。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航