React官网（2）—组件和属性

来源：互联网发布：心事谁人知葫芦丝编辑：程序博客网时间：2024/06/06 03:05

组件和属性

组件将UI分为独立、可重复利用的部分，且每一部分可以单独考虑。

概念上来讲组件就像JS函数：接受随机输入（叫做props），并返回React元素描述在屏幕上。

函数形式的组件和类形式的组件

最简单定义组件的方法是写一个函数。

function Welcome(props){

return <h1>hello,{props.name}</h1>;

}

这种函数是一个“空”React组件因为它接受一个单独的“props”数据对象参数并返回一个React 元素。

我们叫这种组件为“函数化”，因为它们就是一个JS函数

或者使用ES6class定义一个组件

Class Welcome extends React.Compoent{

Render(){

Return <h1>hellom{props.name}</h1>;

}}

这两种定义方式在React看来是等价的。但类定义的组件有一些额外的特性。

渲染一个组件

以前，我们遇到的React元素都是以DOM标签表示的。

const element = <div />

然而，元素也可以使用用户定义的组件来表示

const element = <Welcome name=”Sara” />

当React遇到一个元素代表用户定义的组件时，它将JSX属性作为一个单独的对象传递给这个组件，我们把这个对象叫做“props”

例如下面这个例子，它在网页上会显示出“Hello，Sara”

function Welcome(props){

return <h1>Hello,{props.name}</h1>

}

const element = <Welcome name=”Sara” />

ReactDOM.render(

element,

document.getElementById(‘root’)

);

让我们看看这个例子里发生了什么：

1. 我们使用<Welcome name=’Sara’/>元素调用ReactDOM.render

2. React调用带有name参数作为props的welcome组件

3. 组件Welcome返回了<h1>Hello,Sara</h1>元素作为结果

4. ReactDOM更新了DOM来匹配这个元素

PS:组件总是以大写字母开头

构成组件

组件可以嵌套在其他组件中，也可以使用相同的组件抽象应用。包括按钮、表单、对话框等，都可以描述为组件。

例如，我们可以创建一个App组件多次渲染Welcome

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

function App() {

return (

<div>

</div>

);

}

ReactDOM.render(

<App />,

document.getElementById('root')

);

这个Reactapps有一个单独的组件App在DOM树顶部。但如果你将它放入一个已经存在的APP中，它可能从最低端的小组件例如Button按钮开始逐渐渲染至视图层的顶端。

PS:组件必须返回一个单独的根元素。这就是为什么<div>要包含所有的<welcome>

组件分离

不要害怕将组件分离为更小的组件

考虑下面这个Comment组件

function Comment(props) {

return (

<img className="Avatar"

src={props.author.avatarUrl}

alt={props.author.name}

{props.author.name}

</div>

{props.text}

</div>

{formatDate(props.date)}

</div>

);

}

它接受作者（一个对象），文本（一个字符串）和日期作为props来描述一个社交网站的评论

这个组件很难被重用，我们可以分离一些组件。

首先，我们可以分离Avatar

function Avatar(props) {

return (

<img className="Avatar"

src={props.user.avatarUrl}

alt={props.user.name}

);

}

Avatar组件并不需要知道自己将要被渲染进Comment组件，这样做我们可以给她一个更一般的名字：user而不是author。

我们建议从组件的角度来命名属性（props），而不是根据它所要被使用的上下文。

现在我们可以稍微简化一点Comment组件

function Comment(props) {

return (

{props.author.name}

</div>

{props.text}

</div>

{formatDate(props.date)}

</div>

);

}

接着，我们可以将UserInfo组件提出来，将Avatar渲染进这个组件

function UserInfo(props) {

return (

{props.user.name}

</div>

);

}

现在我们更进一步简化了Comment组件

function Comment(props) {

return (

{props.text}

</div>

{formatDate(props.date)}

</div>

);

}

分离组件刚开始可能是一项繁杂的工作，但是在更大型的应用中一组可重用的组件可以减轻不少工作量。

比较好的考虑办法是如果你的UI的一部分会被多次使用（例如按钮、面板、头像）或者app本身是一个相当复杂的应用（App、评论等），分离组件增加可重用性是一个bi比较

将组件中更小的组件分离出来形成可重用的组件。

Props是只读的

无论组件的描述形式是怎样，都无法改变它的props。

function sum(a, b) {

return a + b;

}

这类函数被称为纯函数,因为它不会尝试改变输入，且相同的输入会有相同的结果

相反，下面这类函数就会改变输入

function withdraw(account, amount) {

account.total -= amount;

}

React有一个原则：

所有的React组件必须对其性质必须表现的像纯粹的函数一样：相同的输入有相同的输出

当然，应用程序UI是动态的、并且是根据时间变化的。下节会介绍状态这个概念，它允许React组件随着时间对用户行为、网络响应等作出反应改变输出，这并不违背上述原则。

阅读全文

0 0