04：React学习笔记：组件 & Props

1.函数组件与 class 组件

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

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

2. 渲染组件

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

3. 提取组件

examples

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

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

4.Props 的只读性

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