React组合组件和提取组件——知识梳理

《React组合组件和提取组件——知识梳理》

组合组件

有了组件和参数props的基础,下面我们来学习组合组件。

就是组件中的组件,组件的嵌套。

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

function Hello(props) {
  return <h1>hello ,{props.name}</h1>
}
// 注意之间名首字母需要大写

function Hi(props) {
  return (
    <div>
      <Hello name='mui' />
      <Hello name='hello' />
      <Hello name='hi' />
    </div>
  )

}
function App() {
  return (

    ReactDOM.render(
      <Hi />,
      document.getElementById('root')
    )
  )
}

export default App;

提前组件

既然后组合组件,就有提取组件。

意思就是将组件拆分为更小的组件。逆转思维。

例如我们有一个这样复杂的组件:

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

第一次可以分解出:

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.author} /> <div className="UserInfo-name"> {props.user.name} </div> </div> ) }

最终的组件应该写成:



function Comment(props) { return ( <div className="Comment"> <Userinfo user={props.user} /> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }

props只读

组件不能修改自身的props 。

下面这个函数则不是纯函数,因为它更改了自己的入参:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注