③ 组件&props

1 函数组件 & class 组件

• react 组件：接收唯一带有数据的 props 对象与返回一个 react 元素

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

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

2 渲染组件

• 当 React 元素为用户自定义组件时，会将 JSX 所接收的属性以及子组件转换为 props 对象传递给组件

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

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

• React 会将以小写字母开头的组件视为原生 DOM 标签

3 组合组件

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

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

4 提取组件

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

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

• 该组件由于嵌套关系导致难以维护，很难复用其各个部分

4.1 提取 Avatar 组件

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

  function Avatar(props) {
    return (
      <img className="Avatar" 
        src={ props.user.avatarUrl }
        alt={ props.user.name }
      />
    )
  }
  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>
    )
  }

4.2 提取 UserInfo 组件

• 该组件在用户名旁渲染Avatar组件

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

5 Props 的只读性

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

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