react.js的组件
我的笔记里对react.js的学习包含了以下8个内容：
- import react.js
- JSX
- 渲染
- Components and props (This note)
- react 生命周期 (This note)
- 事件处理
- 条件渲染 if-else
- 列表渲染 for loop
创建react组件
组件允许用户将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
有三种方式来创建组件：
- React.createClass (基本上不再使用)
- 编写 JavaScript 函数 (stateless)
- class 继承 React.Component (stateful)
无状态组件 / 函数式组件
编写一个js函数，函数名就是组件的标签名，函数里面可以通过props来获取标签的属性。
<script type="text/babel">
function Profile(props) {
return <div className="profile">
<h3>Welcome</h3>
<p>Name: {props.name}</p>
<p>Age: {props.age}岁</p>
<p>Likes: {props.likes}</p>
</div>;
}
ReactDOM.render(
<Profile name="马保国" age="69" likes="耗子尾汁" />,
document.getElementById('react_container')
);
</script>
需要注意的是，上面例子的第三行return <div ...>必须写在一起，两者之间不能换行。
状态组件
通过继承React.Component类并重写里面的render()函数来构造react组件。
<script type="text/babel">
class Profile extends React.Component {
render() {
return <div className="profile">
<h3>Welcome</h3>
<p>Name: {this.props.name}</p>
<p>Age: {this.props.age}岁</p>
<p>Likes: {this.props.likes}</p>
</div>;
}
}
ReactDOM.render(
<Profile name="马保国" age="69" likes="耗子尾汁" />,
document.getElementById('react_container')
);
</script>
注意：以上代码中的数据依然是使用this.props.xxx来获取的。对于有状态的组件，我们也可以通过this.state.xxx获取，不过这种情况下JSX里面的property就没有意义了。
有状态组件的生命周期
生命周期关系着代码的执行，react组件的生命周期主要分为以下4个阶段：
- Initialisation 初始化阶段
- Mounting 加载阶段
- Updation 更新阶段
- Unmounting 销毁阶段
对于每个阶段，具体的执行流程如下：
图中每一个结点都是一个可以重写的函数，我们可以重写它们来实现我们想要的效果。
下面是实例代码：
class Baoguo extends React.Component {
constructor(props) {
// here we set some initial value to the component
console.log('component initialisation')
super(props);
this.state = {
skill1: '正蹬',
skill2: '鞭腿',
skill3: '刺拳',
age: 69,
item: '耗子尾汁',
virtue: '武德'
}
}
componentWillMount() {
// here normally we have ajax request to get data
console.log('before mounting the conponent')
}
render() {
// on mounting the component
return <div className="raw-text">
<p>我说小伙子你不讲武德，你不懂。(他说) 马老师，对不 对不起，我不懂规矩，啊我是 他说他是乱打的。</p>
<p>他可不是乱打的啊，{this.state.skill1}、{this.state.skill2}、{this.state.skill3}，训练有素。</p>
<p>后来他说他练过 三四年泰拳。啊，看来是有备而来。</p>
<p>这两个 年轻人不讲武德，来骗，来偷袭！我{this.state.age}岁的 老同志。这好吗？这不好。我劝 这位 年轻人，{this.state.item}，好好反思。</p>
<p>以后不要再犯 这样的聪明，小聪明 啊！额...武林 要以和为贵，要讲{this.state.virtue}。 不要搞 窝里斗。</p>
<p>谢谢朋友们！</p>
<button onClick={()=>alert('chicken you are too beautiful~')}>Click me</button>
</div>;
}
componentDidMount() {
console.log('after mounting the component')
}
}
ReactDOM.render(
<Baoguo />,
document.getElementById('react_container')
);
Top comments (0)