用python画罗小黑,组件 & Props

官方文档对组件的定义：

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

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

组件从概念上看就像是函数，它可以接收任意的输入值(称之为“props”)，并返回一个需要在页面上展示的React元素。

函数定义/类定义组件

通过js函数定义一个组件

function welcome(props){

return

hello,{props.name}

;

}

使用class 定义组件

class Welcome extends React.Component {

render() {

return

Hello, {this.props.name}

;

}

}

React元素 和XML类似，可以自定义组件

​const element = ;

注意：组件名称必须以大写字母开头

组件组合：官方demo

ReactDOM.render(

,

document.getElementById('root')

);

function Welcome(props) {

return

Hello, {props.name}

;

}

function App() {

return (

);

}

注意:

组件的返回值只能有一个根元素。这也是我们要用一个

来包裹所有元素的原因。

以下内容复制自官方文档，我觉得都比较简单 就不分析理解了。

提取组件

你可以将组件切分为更小的组件，这没什么好担心的。

例如，来看看这个Comment组件：

function Comment(props) {

return (

src={props.author.avatarUrl}

alt={props.author.name}

/>

{props.author.name}

{props.text}

{formatDate(props.date)}

);

}

这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props，用来描述一个社交媒体网站上的评论。

这个组件由于嵌套，变得难以被修改，可复用的部分也难以被复用。所以让我们从这个组件中提取出一些小组件。

首先，我们来提取Avatar组件：

function Avatar(props) {

return (

src={props.user.avatarUrl}

alt={props.user.name}

/>

);

}

Avatar作为Comment的内部组件，不需要知道是否被渲染。因此我们将author改为一个更通用的名字user。

我们建议从组件自身的角度来命名props，而不是根据使用组件的上下文命名。

现在我们可以对Comment组件做一些小小的调整：

function Comment(props) {

return (

{props.author.name}

{props.text}

{formatDate(props.date)}

);

}

接下来，我们要提取一个UserInfo组件，用来渲染Avatar旁边的用户名：

function UserInfo(props) {

return (

{props.user.name}

);

}

这可以让我们进一步简化Comment组件：

function Comment(props) {

return (

{props.text}

{formatDate(props.date)}

);

}

提取组件一开始看起来像是一项单调乏味的工作，但是在大型应用中，构建可复用的组件完全是值得的。当你的UI中有一部分重复使用了好几次(比如，Button、Panel、Avatar)，或者其自身就足够复杂(比如，App、FeedStory、Comment)，类似这些都是抽象成一个可复用组件的绝佳选择，这也是一个比较好的做法。

Props的只读性

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

function sum(a, b) {

return a + b;

}

类似于上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。

与之相对的是非纯函数，它会改变它自身的输入值：

function withdraw(account, amount) {

account.total -= amount;

}

React是非常灵活的，但它也有一个严格的规则：

所有的React组件必须像纯函数那样使用它们的props。

当然，应用的界面是随时间动态变化的，我们将在下一节介绍一种称为“state”的新概念，State可以在不违反上述规则的情况下，根据用户操作、网络响应、或者其他状态变化，使组件动态的响应并改变组件的输出。