React组件的应用介绍

目录

• 1. 介绍
• 2. 组件的创建方式
• 2.1 函数创建组件
• 2.2 类组件
• 3. 父子组件传值
• 3.1 函数组件
• 3.2 类组件

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 类组件

注意点：

1. 使用 ES6 语法的 class 创建的组件(状态组件)
2. 类名称必须要大写字母开头
3. 类组件要继承 React.Component 父类，从而可以使用父类中提供的方法或者属性
4. 类组件必须提供 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} />
      {/* <Child /> */}
    </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

到此这篇关于React组件的应用介绍的文章就介绍到这了,更多相关React组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！