React中文教程 - Component Data（外部参数及私有变量）

来源：互联网发布：当代传播大数据高涛编辑：程序博客网时间：2024/05/14 20:56

<!DOCTYPE html><html><head><meta http-equiv='Content-type' content='text/html; charset=utf-8'><title>React | Component Data</title><script src="build/react.min.js"></script><script src="build/JSXTransformer.js"></script><style>a {color:#000; cursor:pointer;}</style></head><body><div id="example"></div><script type="text/jsx">/** @jsx React.DOM */var LikeLink = React.createClass({getInitialState: function() {return {isClicked: false};},render: function() {// render()函数除了renderComponent()时会被刷新之外，handleClick点击的时候也会被执行哦~var text = this.props.liked ? '已赞' : '赞一个';return <a onClick={this.handleClick.bind(this)}>{text}</a>;},handleClick: function() {// 每次点击更改liked属性值this.props.liked = !this.props.liked;// 每次点击更改isClicked状态值this.setState({isClicked: !this.state.isClicked});alert(this.state.isClicked ? 'true' : 'false');}});var myLikeLink = <LikeLink liked={false} />React.renderComponent(myLikeLink, document.getElementById('example'));</script></body></html>

这个例子是由http://facebook.github.io/react/docs/component-data.html完善后实现的，我们一步步介绍这个例子是如何使用的，以及React Component是如何接受外部参数和定义私有变量的。

getInitialState()的返回值定义了该组件所需的全部私有变量，私有变量可以在整个组件内部任何地方使用，获取私有变量使用this.state.[变量名]；
需要更改私有变量的值请使用this.setState(变量名, value)函数；
当组件需要被实例化时需要接收外部传入参数，在组件内部任何地方使用this.props.[变量名获取]；
实例化组件使用XML [KEY=VALUE]的标准属性格式传送，例如var myLikeLink = <LikeLink liked={false} />粗体部分，注意false需要用花括号包含；
私有变量只允许在组件内部使用，不要尝试在外部任何地方访问或者修改它；
当私有变量或者参数被更改时，组件的render()就会被执行；

本例子中的私有变量在React官方的解释叫State（状态），而参数则被称为Props（属性）

本文使用“私有变量”和“参数”是根据本人的经验，使用了OOP编程中常用的概念名词，不代表是最准确的解释！

您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！
如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。