快捷導(dǎo)航

React組件的應(yīng)用介紹

更新時(shí)間：2022年09月30日 10:00:08 作者：月光曬了很涼快

React組件分為函數(shù)組件與class組件；函數(shù)組件是無(wú)狀態(tài)組件，class稱為類組件；函數(shù)組件只有props，沒(méi)有自己的私有數(shù)據(jù)和生命周期函數(shù)；class組件有自己私有數(shù)據(jù)(this.state) 和生命周期函數(shù)

1. 介紹

組件允許你將 UI 拆分為獨(dú)立可復(fù)用的代碼片段，并對(duì)每個(gè)片段進(jìn)行獨(dú)立構(gòu)思。從概念上類似于 JavaScript 類或函數(shù)。它接受任意的形參( props )，并返回用于描述頁(yè)面展示內(nèi)容的 React元素( jsx )。定義好的組件一定要有返回值。

react中定義組件的2種方式

函數(shù)組件(無(wú)狀態(tài)組件/UI組件)
類組件(狀態(tài)組件/容器組件)

2. 組件的創(chuàng)建方式

2.1 函數(shù)創(chuàng)建組件

注意點(diǎn)：

函數(shù)組件（無(wú)狀態(tài)組件）：使用JS的函數(shù)創(chuàng)建組件；
函數(shù)名稱必須以大寫字母開(kāi)頭；
函數(shù)組件必須有返回值（jsx/null），表示該組件的結(jié)構(gòu)，且內(nèi)容必須有頂級(jí)元素包裹。

使用：

import React, { Component } from 'react'
// 定義函數(shù)組件  如果你安裝了jsx插件，則可以通過(guò) 【rfc】 完成創(chuàng)建
// 1.使用js中的定義函數(shù)
// 2.函數(shù)名稱，首字母大寫
// 3.必須要有jsx/null返回值，如果是jsx則一定要有頂層元素包裹
const App = () => {
  return (
    <div>
      <h3>我是一個(gè)App函數(shù)組件</h3>
    </div>
  )
}
export default App

2.2 類組件

注意點(diǎn)：

使用 ES6 語(yǔ)法的 class 創(chuàng)建的組件(狀態(tài)組件)
類名稱必須要大寫字母開(kāi)頭
類組件要繼承 React.Component 父類，從而可以使用父類中提供的方法或者屬性
類組件必須提供 render 方法，用于頁(yè)面結(jié)構(gòu)渲染，結(jié)構(gòu)必須要有頂級(jí)元素，且必須 return 去返回

使用：

import React, { Component } from 'react'
// 定義類組件  如果你安裝了jsx插件，則可以通過(guò) 【rcc】來(lái)創(chuàng)建類組件
// 1.要以es6的定義類來(lái)定義 ，必須以class定義類
// 2.此類必須要繼承父類[Component]
// 3.此類必須要有一個(gè)成員方法 render，此方法中必須要返回jsx/null,如果是jsx必須要有頂層元素
class App extends Component {
  render() {
    return (
      <div>
        <h3>App之類組件</h3>
      </div>
    )
  }
}
export default App

3. 父子組件傳值

組件間傳值，在React中是通過(guò)只讀屬性 props 來(lái)完成數(shù)據(jù)傳遞的。

props：接受任意的形參，并返回用于描述頁(yè)面展示內(nèi)容的 React 元素。

props中的數(shù)據(jù)是不能被修改的，只能讀取。

props是一個(gè)單向數(shù)據(jù)流。父流向子，子不能直接去修改 props 中的數(shù)據(jù)。

3.1 函數(shù)組件

import React, { Component } from 'react'
// 函數(shù)組件間的通信
// 子組件通過(guò)入?yún)?props來(lái)接收 父組件傳過(guò)來(lái)的數(shù)據(jù)  props它是一個(gè)對(duì)象
const Child = props => {
  let {title} = props
  console.log(props)
  return (
    <div>
      <h3>Child組件 -- {title}</h3>
    </div>
  )
}
// 標(biāo)準(zhǔn)寫法
// const Child = ({ title = '默認(rèn)值', fn }) => {
//   console.log(fn())
//   return (
//     <div>
//       <h3>Child組件 -- {title}</h3>
//     </div>
//   )
// }
const App = () => {
  // 在react中的方法，先定義后調(diào)用
  const fn = () => {
    return 'fn'
  }
  return (
    <div>
      <h3>App組件</h3>
      {/* 通過(guò)自定義屬性，可以向子組件傳遞數(shù)據(jù) ，此數(shù)據(jù)它是單向數(shù)據(jù)流，子組件不能直接修改 */}
      <Child title="hello" num={100} obj={{ id: 1 }} fn={fn} />
      {/* <Child /> */}
    </div>
  )
  // function fn() {
  //   return 'function'
  // }
}
export default App

3.2 類組件

import React, { Component } from 'react'
// 類組件 父?jìng)髯?
// 子組件它是通過(guò) 成員屬性this.props來(lái)接受
class Child extends Component {
  render() {
    // 得到父組件傳過(guò)來(lái)的自定義屬性數(shù)據(jù)
    let { title = '默認(rèn)值', fn } = this.props
    console.log(fn())
    return (
      <div>
        <h3>Child組件 -- {title}</h3>
      </div>
    )
  }
}
class App extends Component {
  fn = arg => () => 'fn@@@ -- ' + arg
  render() {
    return (
      <div>
        <h3>App</h3>
        {/* 注意:子組件中打印時(shí)會(huì)調(diào)用函數(shù),所以這里傳的值一定得是函數(shù),而不是執(zhí)行函數(shù)過(guò)后的數(shù)據(jù) */}
        <Child title="我是標(biāo)題" fn={this.fn(200)} />
      </div>
    )
  }
}
export default App