RCT002 React Components

#react

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')
);