React学习笔记

React Learn Note 4

React学习笔记（四）

标签（空格分隔）： React JavaScript

---

三、组件&Props

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件接收props，返回react元素。

1. 函数定义类定义组件

最简单组件方式 - 函数定义组件：

// 函数定义组件
function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

ES6 class定义组件，效果同上：

// ES6 class定义组件
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

2. 组件渲染

将组件作为React元素，标签的属性作为props键值：

const element5_1 = <Welcome name="Sara"></Welcome>;
ReactDOM.render(
    element5_1,
    document.getElementById('root5')
);

**警告:** 组件名称必须大写字母开头。

3. 组合组件

React组件也可以嵌套。

function App() {
    return (
        <div>
            <Welcome name="Bob"></Welcome>
            <Welcome name="Cahal"></Welcome>
            <Welcome name="John"></Welcome>
        </div>
    );
}

ReactDOM.render(
    <App></App>,
    document.getElementById('root6')
);

**警告:** 组件的返回值只能有一个根元素。所以将多个`Welcome`元素用`div`包裹。

4. 提取组件

可以将组件切分为更小的组件。

function formatDate(date) {
    return date.toLocaleTimeString();
}
function Comment(props) {
    return (
      <div className="Comment">
          <div className="UserInfo">
              <img src={props.author.avatarUrl} alt={props.author.name}/>
              <div className="UserInfo-name">
                  {props.author.name}
              </div>
          </div>
          <div className="Comment-text">
              {props.text}
          </div>
          <div className="Comment-date">
              {formatDate(props.date)}
          </div>
      </div>
    );
}

ReactDOM.render(
    <Comment author={{avatarUrl: '../static/img/zhifibao_key.jpg', name: 'Jessie'}} text="This is comment text." date={new Date()}></Comment>,
    document.getElementById('root7')
);

这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props。是个复杂的组件。接下来我们提取拆分这个组件。

首先提取Avatar组件：

// 提取组件
function Avatar(props) {
    return (
        <img src={props.user.avatarUrl} alt={props.user.name} className="Avatar"/>
    );
}

function UserInfo(props) {
    return (
        <div className="UserInfo">
            <Avatar user={props.user}></Avatar>
            <div className="UserInfo-name">
                {props.user.name}
            </div>
        </div>
    );
}

// 最终Comment组件被简化为
function Comment2(props) {
    return (
        <div className="Comment">
            <UserInfo user={props.author}></UserInfo>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

ReactDOM.render(
    <Comment2 author={{avatarUrl: '../static/img/zhifibao_key.jpg', name: 'Xiaoyu Lee'}} text="Wow, this is very beautiful." date={new Date()}></Comment2>,
    document.getElementById('root8')
);

5. Props的只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。

The end...    Last updated by: Jehorn, Jan 07, 2018, 5:44 PM

• React学习笔记（一）- Hello World
• React学习笔记（二）- JSX简介
• React学习笔记（三）- 元素渲染
• React学习笔记（四）- 组件&Props