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