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

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

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

1. 介紹

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

react中定義組件的2種方式

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

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

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

注意點：

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

使用：

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

2.2 類組件

注意點：

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

使用：

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

3. 父子組件傳值

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

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

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

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

3.1 函數(shù)組件

import React, { Component } from 'react'
// 函數(shù)組件間的通信
// 子組件通過入?yún)?props來接收 父組件傳過來的數(shù)據(jù)  props它是一個對象
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>
      {/* 通過自定義屬性，可以向子組件傳遞數(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'
// 類組件 父傳子
// 子組件它是通過 成員屬性this.props來接受
class Child extends Component {
  render() {
    // 得到父組件傳過來的自定義屬性數(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>
        {/* 注意:子組件中打印時會調(diào)用函數(shù),所以這里傳的值一定得是函數(shù),而不是執(zhí)行函數(shù)過后的數(shù)據(jù) */}
        <Child title="我是標(biāo)題" fn={this.fn(200)} />
      </div>
    )
  }
}
export default App