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

<!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是如何接受外部参数和定义私有变量的。

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

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

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


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

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...