③ 组件&props

2021-09-24 11:34:24 阅读：161 来源： 互联网

标签：function return name Welcome props 组件

函数组件&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>
    }
  }

渲染组件

当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标签

组合组件

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

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

提取组件

将组件拆分为更小的组件

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

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

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

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

Props的只读性

组件无论是使用函数声明还是通过class声明，都决不能修改自身的 props
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

标签：function,return,name,Welcome,props,组件
来源： https://www.cnblogs.com/pleaseAnswer/p/15329528.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9