第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么 reactjs 中的箭頭函數(shù)有時被視為組件?

為什么 reactjs 中的箭頭函數(shù)有時被視為組件?

紅糖糍粑 2022-07-21 21:32:37
我目前正在學(xué)習 reactJS,我發(fā)現(xiàn)很難理解為什么 reactjs 中的箭頭函數(shù)有時被視為組件,有時被視為普通箭頭函數(shù)。在這個例子中:    class CommentListContainer extends React.Component {      state = { comments : [] };      componentDidMount() {        fetchSomeComments(s => // 1- here fetchSomeComments is treated as a normal arrow function          this.setState({ comments: s }));      }      render() {        return <CommentList comments={this.state.comments} />; // 2- here CommentList is treated as a component      }    }    // 1    const fetchSomeComments = cb =>      cb([        { author: "Chan", body: "You look nice today." },        { author: "You", body: "I know, right?!" }      ]);    // 2    const CommentList = comments =>      <ul>        {          comments.comments.map(            (c, index) => (            <li key = {index}>{c.body}—{c.author}</li>            )          )        }      </ul>我想理解這一點,如果 CommentList 是一個組件,它怎么能寫成一個帶有構(gòu)造函數(shù)(props)的類?
查看完整描述

2 回答

?
三國紛爭

TA貢獻1804條經(jīng)驗 獲得超7個贊

ReactJS 中的箭頭函數(shù)被認為是一個函數(shù)組件或只是一個箭頭函數(shù),具體取決于它們返回的內(nèi)容。


const CommentList = comments =>

      <ul>

        {

          comments.comments.map(

            (c, index) => (

            <li key = {index}>{c.body}—{c.author}</li>

            )

          )

        }

      </ul> 

上述組件稱為無狀態(tài)組件。它除了渲染道具什么都不做。沒有狀態(tài),鉤子等。


但是可以有狀態(tài)的組件是通過react hooks實現(xiàn)的。也就是說,功能組件可以做類組件所做的一切。它可以渲染狀態(tài)執(zhí)行操作,而不僅僅是返回 JSX(就像一個無狀態(tài)組件)


要詳細了解這一點,請查看React Function Component


要使 CommentList 成為類組件,可以執(zhí)行以下操作:


class CommentList extends React.Component {

    constructor(props) {

         super(props);

    }


    render () {

      /* destructuring props so that we can use "comments" prop directly instead of

      using this.props.comments */

      const {comments}=this.props; 


      return (

        <ul>

          {comments.comments.map((c, index) => (

            <li key={index}>

              {c.body}—{c.author}

            </li>

          ))}

        </ul>

      );

    }

}

TLDR;普通箭頭函數(shù)和函數(shù)式組件的區(qū)別在于返回類型,即函數(shù)式組件返回 JSX。


查看完整回答
反對 回復(fù) 2022-07-21
?
繁星點點滴滴

TA貢獻1803條經(jīng)驗 獲得超3個贊

class CommentList extends React.Component {

  construct(props) {

    super(props);

  }

  render() {

    let list_items = [];

    for(let c of this.props.comments) {

        list_items.push(<li key = {index}>{c.body}—{c.author}</li>);

    }

    return (

      <ul>{list_items}</ul>

    );

  }

}

function CommentList(props) {

    let list_items = [];

    for(let c of props.comments) {

        list_items.push(<li key = {index}>{c.body}—{c.author}</li>);

    }

    return (<ul>{list_items}</ul>);

}

在 React 中它們是一樣的,第二個稱為“函數(shù)組件”。 


查看完整回答
反對 回復(fù) 2022-07-21
  • 2 回答
  • 0 關(guān)注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號