【React基础】组件 & Props

组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

函数组件与 class 组件

定义组件方式一：函数组件

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

定义组件方式二：class组件

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

渲染组件

之前，我们遇到的 React 元素都只是 DOM 标签：

const element = <div />;

React 元素可以是用户自定义的组件

const element = <Welcome name="Sara" />;

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

例子

function Welcome(props) {console.log(props)return <h1>Hello,{props.name}</h1>
}const element = <Welcome name="Sara" />;
ReactDOM.render(element,document.getElementById('root'))

过程

1. 我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 作为参数。
2. React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
3. Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
4. React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

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

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

组合组件

组件可以在其输出中引用其他组件。

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

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}function App() {return (<div><Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>);
}ReactDOM.render(<App />,document.getElementById('root')
);

通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。

提取组件

将组件拆分为更小的组件。

例子，Comment组件：

function Comment(props) {return (<div className="Comment"><div className="UserInfo"><img className="Avatar"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>);
}

该组件用于描述一个社交媒体网站上的评论功能，它接收 author（对象），text （字符串）以及 date（日期）作为 props。

该组件由于嵌套的关系，变得难以维护，且很难复用它的各个部分。

所以提取组件：

1.提取Avatar组件

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

给它的 props 起了一个更通用的名字：user

建议从组件自身的角度命名 props，而不是依赖于调用组件的上下文命名。

2.针对Comment 做些微小调整：`

function Comment(props) {return (<div className="Comment"><div className="UserInfo"><Avatar user={props.author} />        <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>);
}

3.提取UserInfo组件，该组件在用户名旁渲染Avatar组件

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

4.再简化 Comment 组件

function Comment(props) {return (<div className="Comment"><UserInfo user={props.author} />      <div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>);
}

最初看上去，提取组件可能是一件繁重的工作，但是，在大型应用中，构建可复用组件库是完全值得的。

Props 的只读性

组件无论是使用函数声明还是通过class声明，都决不能修改自身的 props

例子：sum函数

function sum(a,b) {return a+b;
}

这样的函数被称为"纯函数"，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

下面这个则不是纯函数，改变了自己的入参：

function withdraw(account,amount) {account.total -= amount;
}

React 有一个严格的规则

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。