【译】React——Components 和 Props

By | 2019年6月2日

原文: https://reactjs.org/docs/components-and-props.html
注:
property是【属性】,是DOM中的属性,是JS里面的对象
attribute是【特性】,是HTML标签上的特性,其值只能为字符串
attribute是property的子集

Components 和 Props
“组件”是独立可复用的UI元素。
【组件】类似于js函数,可以接受任意的输入(被称为“props”)并返回描述对应样式的React元素。
函数和类组件
可通过js函数定义

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

该函数接收一个props对象作为参数(该参数用于描述属性(properties))并返回一个React元素。因通过js函数进行声明,这种组件被称为【函数组件】。

可通过ES6 class 定义组件

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

对React而言,两种定义方式等价

渲染组件
– 使用DOM标签
– 使用用户自定义组件

当React处理用户定义的组件时,会将JSX特性(attribute)以一个对象的形式传给这个组件,这个对象就叫做“props”

例:在页面上渲染“Hello,Sara”

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

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

组件嵌套
每个组件可以在其自己的输出中引用其他组件(也就是嵌套,组件套组件)。也就是说我们可以对任意层次的细节使用同一个抽象组件。在react中,按钮、表格、会话等都可以用组件来表示。

例:使用单一的“App”组件多次渲染“Welcome”

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项目都会在非常顶端的位置(at the very top)有一个单一的App组件。若要将React集成进已有项目,也许需要从诸如按钮这样的小组件开始,逐渐向上,直至项目顶端。

提取组件
由多个小组件组成的大组件可以被自由拆分。
例:

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来描述一个社交网站上的评论。
一堆中的东西可以拆出来一块单独用(和普通的html元素差不多的感觉)

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

Props是只读对象!函数和组件方式声明的组件中都不能修改其接收到的props
这里有两个概念:【纯函数】和【非纯函数】
纯函数例:

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

非纯函数例:

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

React有一条严格的规则:
所有的React组件都必须以纯函数形式运作,不能直接修改自己的props

点击量:1833