React 组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：
//组件类的第一个字母必须大写
var HelloMessage = React.createClass({
//所有组件类都必须有自己的 render 方法，用于输出组件。
render: function() {
// 注意：组件类只能包含一个顶层标签，否则也会报错。
return <h1>Hello World！</h1>;
}
});
// ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
//模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例
<HelloMessage />,
document.getElementById('example')
);
代码解析
React.createClass 方法用于生成一个组件类 HelloMessage。
<code><HelloMessage /> </code>实例组件类并输出信息。
注意：们我这里用大写字母开头，以区别组件与html元素
复合组件
我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
render: function() {
return (
<div>
{/*获取React.render上的属性 */}
<Name nameComponent={this.props.name} />
<Link siteComponent={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<!-- 组件的属性可以在组件类的this.props 对象上获取 -->
<h1>{this.props.nameComponent}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.siteComponent}
</a>
);
}
});
React.render(
<WebSite name="学哥" site=" http://www.xuege.com" />,
document.getElementById('example')
);
</script>
</body>
</html>
实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，也就是说 WebSite 拥有 Name 和 Link 的实例。
组件中的React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//创建LikeButton组件
var LikeButton = React.createClass({
//初始化状态
getInitialState: function() {
return {liked: false};
},
//设置点击事件的函数，用来切换状态
handleClick: function() {
this.setState({liked: !this.state.liked});
},
//render函数用于输出组件
render: function() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
//ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
React.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>
组件中的this.props 对象
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
组件中的this.props 对象组件传递参数
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="xuege" />,
document.getElementById('example')
);
默认 Props
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'xuege'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
props与state对比Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "学哥",
site: "http://www.xuege.com"
};
},
render: function() {
return (
<div>
{/*这里要使用初始化的数据，所以不能使用props属性 */}
<Name nameComponent={this.state.name} />
<Link siteComponent={this.state.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
//子组件中使用props属性获取父组件中的state获取到的数据
<h1>{this.props.nameComponent}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.siteComponent}
</a>
);
}
});
React.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>
网友评论