React组件的应用介绍

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

1. 介绍

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。从概念上类似于 JavaScript 类或函数。它接受任意的形参( props )，并返回用于描述页面展示内容的 React元素( jsx )。定义好的组件一定要有返回值。

react中定义组件的2种方式

函数组件(无状态组件/UI组件)
类组件(状态组件/容器组件)

2. 组件的创建方式

2.1 函数创建组件

注意点：

函数组件（无状态组件）：使用JS的函数创建组件；
函数名称必须以大写字母开头；
函数组件必须有返回值（jsx/null），表示该组件的结构，且内容必须有顶级元素包裹。

使用：

import React, { Component } from 'react'
// 定义函数组件  如果你安装了jsx插件，则可以通过 【rfc】 完成创建
// 1.使用js中的定义函数
// 2.函数名称，首字母大写
// 3.必须要有jsx/null返回值，如果是jsx则一定要有顶层元素包裹
const App = () => {
  return (
    <div>
      <h3>我是一个App函数组件</h3>
    </div>
  )
}
export default App

2.2 类组件

注意点：

使用 ES6 语法的 class 创建的组件(状态组件)
类名称必须要大写字母开头
类组件要继承 React.Component 父类，从而可以使用父类中提供的方法或者属性
类组件必须提供 render 方法，用于页面结构渲染，结构必须要有顶级元素，且必须 return 去返回

使用：

import React, { Component } from 'react'
// 定义类组件  如果你安装了jsx插件，则可以通过 【rcc】来创建类组件
// 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 来完成数据传递的。

props：接受任意的形参，并返回用于描述页面展示内容的 React 元素。

props中的数据是不能被修改的，只能读取。

props是一个单向数据流。父流向子，子不能直接去修改 props 中的数据。

3.1 函数组件

import React, { Component } from 'react'
// 函数组件间的通信
// 子组件通过入参 props来接收 父组件传过来的数据  props它是一个对象
const Child = props => {
  let {title} = props
  console.log(props)
  return (
    <div>
      <h3>Child组件 -- {title}</h3>
    </div>
  )
}
// 标准写法
// const Child = ({ title = '默认值', fn }) => {
//   console.log(fn())
//   return (
//     <div>
//       <h3>Child组件 -- {title}</h3>
//     </div>
//   )
// }
const App = () => {
  // 在react中的方法，先定义后调用
  const fn = () => {
    return 'fn'
  }
  return (
    <div>
      <h3>App组件</h3>
      {}
      <Child title="hello" num={100} obj={{ id: 1 }} fn={fn} />
      {}
    </div>
  )
  // function fn() {
  //   return 'function'
  // }
}
export default App

3.2 类组件

import React, { Component } from 'react'
// 类组件 父传子
// 子组件它是通过 成员属性this.props来接受
class Child extends Component {
  render() {
    // 得到父组件传过来的自定义属性数据
    let { title = '默认值', 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>
        {}
        <Child title="我是标题" fn={this.fn(200)} />
      </div>
    )
  }
}
export default App