阅读 127

React(二):组件&props

组件可以将 UI 拆分成独立可复用的代码片段,接收入参 props 并返回一个 React 元素。

函数组件

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

const element = <Welcome name="Sara">
复制代码

自定义组件必须大写字母开头,不然会被 React 误认为是原生 DOM 标签。

多个组件可以组合在一起:

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Klaus" />
      <Welcome name="Mike" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
复制代码

可以通过组合形成复杂的结构:

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div>
      <div>
        <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>
  );
}

const comment = {
  date: new Date(),
  text: "I hope you enjoy learning React!",
  author: {
    name: "Hello Kitty",
    avatarUrl: "https://placekitten.com/g/64/64",
  },
};

ReactDOM.render(
  <Comment date={comment.date} text={comment.text} author={comment.author} />,
  document.getElementById("root")
);
复制代码

过于复杂的单个组件难以复用,可以将其拆分:

function formatDate(date) {
  return date.toLocaleDateString();
}

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

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

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>
  );
}

const comment = {
  date: new Date(),
  text: "I hope you enjoy learning React!",
  author: {
    name: "Hello Kitty",
    avatarUrl: "https://placekitten.com/g/64/64",
  },
};

ReactDOM.render(
  <Comment date={comment.date} text={comment.text} author={comment.author} />,
  document.getElementById("root")
);
复制代码

props 的只读性

入参 props 不能被修改。参考下面这个纯函数:

function sum(a, b) {
  return a + b;
}
复制代码

下面这个则不是纯函数:

function withdraw(accoumt, amount) {
  account.total = account.total - amount;
}
复制代码

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

class 组件

class 组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
复制代码
文章分类
前端
文章标签