React 函数组件和类组件props、state、获取DOM用法及区别

已于 2024-05-08 15:39:09 修改
阅读量779 收藏 9
点赞数 25
文章标签： react.js 前端 javascript
于 2024-05-08 15:32:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47529732/article/details/138540136
版权

目录

项目结构

1. React 组件创建方式

1.1 函数组件

1.1.1 在App.js中用函数创建App组件

1.1.2 在index.js 引入 App组件

1.2 类组件

1.2.1 在App.js中用类的方式创建App组件

1.2.2 在index.js 引入 App组件

1.3 区别

2. props 父传子

2.1 函数组件使用props

2.1.1 入口文件 index.js

2.1.2  父组件 ListItems.js

2.1.3 子组件 Item.js

2.2 类组件使用props 

2.2.1 入口文件 index.js

2.2.2 App.js

2.2.3  父组件 ListItems.js

2.2.4 子组件 Item.js

3. state 在React中注册变量

3.1 函数组件使用钩子 useState() 来创建state

3.2 类组件中state统一存储到了实例对象的state属性中

3.3 区别：

4. React 获取DOM对象

4.1 函数组件 从React处获取DOM对象 useRef()

4.2 类组件使用 React.createRef() 获取DOM

项目结构

1. React 组件创建方式

1.1 函数组件

  • 函数组件就是一个返回JSX的普通
  • 组件的首字母必须是大写
1.1.1 在App.js中用函数创建App组件
const App = () => {
  return <div>我是App组件！</div>
};

// 导出App
export default App;
1.1.2 在index.js 引入 App组件
import ReactDOM from "react-dom/client";
import App from "./App";


const root = ReactDOM.createRoot(document.getElementById('root'));

// React组件可以直接通过JSX渲染
root.render(<App/>);

1.2 类组件

  • 类组件必须要继承React.Component
  • 用啥变量都要用 this.xxx
1.2.1 在App.js中用类的方式创建App组件
import React from "react";
// import React,{Component} from "react";

class App extends React.Component {

    // 类组件中，必须添加一个render()方法，且方法的返回值要是一个jsx
    render() {
        return <div>我是一个类组件</div>;
    }
}

// 导出App
export default App;
1.2.2 在index.js 引入 App组件
  • 跟 1.1.2 一模一样

1.3 区别

  • 相较于函数组件，类组件的编写要麻烦一下，但是实现的功能是一样的

2. props 父传子

2.1 函数组件使用props

  • 在函数组件中，属性就相当于是函数的参数，可以通过参数来访问
  • 可以在函数组件的形参中定义一个props，props指向的是一个对象，包含了父组件中传递的所有参数
2.1.1 入口文件 index.js
// 引入ReactDOM
import ReactDOM from "react-dom/client"
import "./index.css"
import ListItems from './Components/ListItems'
// 创建一个JSX
const App = <div className="logo">
    <ListItems />
</div>

// 获取根容器
const root = ReactDOM.createRoot(document.getElementById('root'))
// 将App渲染进根容器
root.render(App)
2.1.2  父组件 ListItems.js
import Item from "./Item/Item"
const Items = () => {
    const list = [
        { id: 1, des: "打王者荣耀", time: 60, date: new Date(), },
        { id: 2, des: "学习Vue", time: 120, date: new Date(), },
        { id: 3, des: "学习React", time: 20, date: new Date() },
    ]
    return <div className="items">
        {
            list.map(item => <Item key={item.id} des={item.des} time={item.time} date={item.date}></Item>)
        }
    </div>
}
export default Items
2.1.3 子组件 Item.js
const Item = (props) => {
    console.log(props, 'props');
    return <div className="content">
        <h2 className="des">{props.des}</h2>
        <div className="time">{props.time}分钟</div>
        {/* 显示的是 中文的 五月 */}
        <div style={{ background: '#f00' }}>{props.date.toLocaleString('zh-CN', { month: 'long' })}</div>
    </div>
}
export default Item

2.2 类组件使用props 

  • 类组件的props是存储到类的实例对象中，可以直接通过实例对象访问，this.props
2.2.1 入口文件 index.js
// 引入ReactDOM
import ReactDOM from "react-dom/client"
import "./index.css"
import App from './App'

// 获取根容器
const root = ReactDOM.createRoot(document.getElementById('root'))
// 将App渲染进根容器
root.render(<App />)
2.2.2 App.js
import React from "react";
import ListItems from "./Components/ListItems"
class App extends React.Component {
    render() {
        return <ListItems></ListItems>
    }
}
export default App
2.2.3  父组件 ListItems.js

import React from "react";
import Item from "./Item/Item"
class ListItems extends React.Component {
    list = [
        { id: 1, des: "打王者荣耀", time: 60, date: new Date(), },
        { id: 2, des: "学习Vue", time: 120, date: new Date(), },
        { id: 3, des: "学习React", time: 20, date: new Date() },
    ]
    render() {
        return <div className="items">
            {
                this.list.map(item => <Item key={item.id} des={item.des} time={item.time} date={item.date}></Item>)
            }
        </div>
    }
}
export default ListItems
2.2.4 子组件 Item.js
import React from "react";
class Item extends React.Component {
    render() {
        return <div className="content">
            <h2 className="des">{this.props.des}</h2>
            <div className="time">{this.props.time}分钟</div>
            {/* 显示的是 中文的 五月 */}
            <div style={{ background: '#f00' }}>{this.props.date.toLocaleString('zh-CN', { month: 'long' })}</div>
        </div>
    }
}
export default Item

3. state 在React中注册变量

* state相当于一个变量，

  *   只是这个变量在React中进行了注册，

  *   React会监控这个变量的变化，当state发生变化时，会自动触发组件的重新渲染

  *   使得我们的修改可以在页面中呈现出来

3.1 函数组件使用钩子 useState() 来创建state

  • 钩子需导入后使用：
import {useState} from "react";
  • useState() 需要一个值作为参数，这个值就是state的初始值，返回一个数组
  1. 数组中第一个元素，是初始值，初始值只用来显示数据，直接修改不会触发组件的重新渲染
  2. 数组中的第二个元素，是一个函数，通常会命名为setXxx，此函数用来修改state，调用其修改state后会触发组件的重新渲染，并且使用函数中的值作为新的state值

App.js

import { useState } from "react";

const App = () => {
    const [count, setCounter] = useState(0)
    const [other, setOther] = useState({
        age: 18,
        gender: 'w'
    })

    
    const handleCilck = () => {
        // setCounter(count + 1)

        // 会有异步的问题
        // setCounter(count + 1)

        /*
        *   setState()中回调函数的返回值将会成为新的state值
        *       回调函数执行时，React会将最新的state值作为参数传递
        * */
        setCounter(prevCount => {
            return prevCount + 1
        });

    }

    const handleCilckOther = () => {
        // other会从两个属性变成一个属性
        // setOther({ gender: 'm' })

        setOther({
            ...other, gender: 'm'
        });
    }

    return <div className="items">
        <div>{count}</div>
        <div>{other.age}</div>
        <div>{other.gender}</div>
        <button onClick={handleCilck}>点击</button>
        <button onClick={handleCilckOther}>改变other</button>
    </div>

}
export default App

注： state实际就是一个被React管理的变量

  1. 当我们通过setState()修改变量的值时，会触发组件的自动重新渲染
  2. 只有state值发生变化时，组件才会重新渲染
  3. 当state的值是一个对象时，修改时是使用新的对象去替换已有对象
  4. 当通过setState去修改一个state时，并不表示修改当前的state，修改的是组件下一次渲染时state值
  5. setState()会触发组件的重新渲染，它是异步的

        - 所以当调用setState()需要用旧state的值时，一定要注意

        - 有可能出现计算错误的情况

        - 为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值

3.2 类组件中state统一存储到了实例对象的state属性中

  • 可以通过 this.state 来访问
  • 通过 this.setState() 对其进行修改
  • 当我们通过 this.setState() 修改state时，React只会修改设置了的属性

 App.js


import React from "react";
class App extends React.Component {
    state = {
        count: 0,
        name: 'hahh',
        other: {
            age: 18,
            gender: 'w'
        }
    }
    // 必须用箭头函数，保证this指向
    handleCilck = () => {
        // this.setState({ count: 2 })
        // 会有异步的问题
        // this.setState({ count: this.state.count + 1 })

        // prevState 是一个对象
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        });

    }

    handleCilckOther = () => {
        // other会从两个属性变成一个属性，因为other没有直接存储到state中
        // this.setState({ other: { gender: 'm' } })
        this.setState({
            other: { ...this.state.other, gender: 'm' }
        });
    }
    render() {
        return <div className="items">
            <div>{this.state.count}</div>
            <div>{this.state.name}</div>
            <div>{this.state.other.age}</div>
            <div>{this.state.other.gender}</div>
            <button onClick={this.handleCilck}>点击</button>
            <button onClick={this.handleCilckOther}>改变other</button>
        </div>
    }
}
export default App

3.3 区别：

  • 函数组件中，响应函数直接以函数的形式定义在组件中
  • 在类组件中，响应函数是以类的方法来定义，之前的属性都会保留，但是这你仅限于直接存储于state中的属性

4. React 获取DOM对象

4.1 函数组件 从React处获取DOM对象 useRef()

1. 创建一个存储DOM对象的容器

          - 使用 useRef() 钩子函数

            钩子函数的注意事项：

                       ① React中的钩子函数只能用于函数组件或自定义钩子

                       ② 钩子函数只能直接在函数组件中调用

2. 将容器设置为想要获取DOM对象元素的ref属性

<div ref={divRef}>....</div>

const divRef= useRef()

   - React会自动将当前元素的DOM对象，设置为容器current属性

        返回的就是一个普通的JS对象 {current:undefined}

    *       - 所以我们直接创建一个js对象，也可以代替useRef()

    *       - 区别：

    *           我们创建的对象，组件每次重新渲染都会创建一个新对象

    *           useRef()创建的对象，可以确保每次渲染获取到的都是同一个对象

    *       - 当你需要一个对象不会因为组件的重新渲染而改变时，就可以使用useRef()

import React, { useRef } from "react";

const App = () => {
    const divRef = useRef() // 创建一个容器
    const handleChange = () => {

        // 原生的DOM对象
        // document.getElementById('haha').innerText = "哈哈哈哈"

        // react中的DOM对象
        console.log(divRef.current)
        divRef.current.innerText = "哈哈哈哈"
    }
    return <div className="items">
        <div id="haha" ref={divRef}>hhhhh</div>
        <button onClick={handleChange}>改变div里面的内容</button>
    </div>

}
export default App

4.2 类组件使用 React.createRef() 获取DOM

1.创建一个属性，用来存储DOM对象

divRef = React.createRef();

  2.将这个属性设置为指定元素的ref值

<div ref={divRef}>....</div>

import React, { Component } from 'react'

class App extends Component {
    divRef = React.createRef()
    handleChange = () => {

        // 原生的DOM对象
        // document.getElementById('haha').innerText = "哈哈哈哈"

        // react中的DOM对象
        console.log(this.divRef.current, 'lei')
        this.divRef.current.innerText = "哈哈哈哈"
    }
    render() {
        return <div className="items">
            <div id="haha" ref={this.divRef}>hhhhh</div>
            <button onClick={this.handleChange}>改变div里面的内容</button>
        </div>
    }

}
export default App

 学习笔记，只为了记录！！！

weixin_47529732
关注
  • 25
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React组件的定义及使用
subsistent的博客
08-16 287
react中组件分为两种 类组件 函数组件（hooks组件）index.js文件，也就是入口文件/*** 使用对应的引入方式 引入组件*//*** 在root.render方法里面* 防御就可以定义我们的根组件* 也就是说react中的组件创建完后，就可以使用标签语法来进行使用* 那么什么是根组件呢？* 进入项目首先展示的组件就是根组件，后期我们会在根组件上进行 创建路由等相关的扩展*/
React组件——类组件
m0_58471238的博客
01-15 6270
React组件——类组件
01-3 React组件（类组件、函数组件、props、state）
前端知识库
05-19 2040
目录 类组件和函数组件 如何使用 props 和 state 外部数据和内部数据 如何绑定事件 复习this 1.组件 component 1.1 Element 和 component const div = React.createElement('div',...) 这是一个React元素（d小写） const Div = ()=> React.createElement('div',...) 这是一个React组件（D大写） 1.2 什么是组件 能跟其他物件组合起来的物件，就是组件
探索React中的类组件和函数组件
最新发布
你若盛开，清风自来
03-09 1299
本文将详细介绍React中的类组件和函数组件，比较它们的区别及使用场景，帮助你对这两种组件有更深入的理解。类组件适用于需要使用生命周期方法或状态和属性需要封装在组件的实例中时的场景。函数组件适用于需要简单、可重用的组件时的场景。React中的类组件和函数组件是构建应用的基础，了解它们的区别和适用场景，可以帮助你在开发过程中更好地使用这两种组件。
React类组件
qq_51130780的博客
07-06 858
类组件的使用
react中的类（有状态）组件，函数（无状态）组件·示例，对比及组件样式引用方案（附代码）
kkkys_kkk的博客
12-30 1259
3. 无状态函数组件（Stateless Functional Components）：无状态函数组件是函数组件的一种特殊形式，它们没有内部状态（state）。在类组件中，通过构造函数（constructor）来初始化内部状态，通过生命周期方法（componentDidMount、componentDidUpdate、componentWillUnmount等）来进行特定的操作（例如发起网络请求、订阅/取消订阅事件等），通过渲染方法（render）来返回一个React元素来描述组件的输出。
React State(状态)
01-19
React State(状态) React 把组件看成是一个状态机（State Machines）。...添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。 React 实例 class Clock extends
React日期选择器组件-JavaScript开发
05-26
calendar示例import从“ react”导入React从“ react-dom”导入ReactDom从“ moment”导入时刻从“ ciqu-react-calendar”类导入日历MyCalendar扩展了React.Component {构造函数（props）{super（props）this.state ...
React开发笔记，React立意选取最小块设计，元素化每个dom标签，在内存中进行操作，引起Dom的最小render，节约
01-25
由于 react 父组件更新，必然会导致子组件更新，因此我们可以在子组件中通过手动对比 props 与 nextProps，state 与 nextState 来确定是否需要重新渲染子组件，如果需要则返回true，不需要则返回 false。该函数默认...
React如何避免重渲染
01-19
我们可以在 React 组件中的 props 和 state 存放任何类型的数据，通过改变 props 和 state，去控制整个组件的状态。当 props 和 state 发生变化时，React 会重新渲染整个组件，组件重新渲染的过程可简化如下图： ...
16章全React18内核探秘：手写React高质量源码迈向高阶开发
10-09
React 的一切都是基于组件的，组件有着良好的封装性，组件可以让代码的复用和测试变得更加简单。各个组件都有着各自的状态，当状态变更时，便会重新渲染整个组件，组件化开发不仅仅应用于 React ，这也是 Web 的发展...
React组件
gy99csdn的博客
01-06 1443
组件是React中最基本的内容，使用React就是在使用组件组件表示页面中的部分功能多个组件可以实现完整的页面功能组件特点：可复用，独立，可组合。
组件化定义函数组件和类组件
weixin_45632765的博客
09-19 345
react 组件化定义函数组件和类组件
React 类组件
weixin_44530344的博客
09-10 458
类组件必须继承React.Component必须有render函数render函数中必须有return。
React 组件（函数组件，类组件）
weixin_55683934的博客
05-24 167
作用: 创建对象，等同于构造函数。类与对象：是指一类事物，比如程序员，指的是一类群体。对象是指具体的事物。前端开发，是程序员这类人中的一种。后台开发，也是程序员的一种。举例，使用FrontEnd与BackEnd，继承Programmaer。总结。
【react】类组件
bbt953的博客
03-08 322
类组件
【React】类组件 state 状态用法
qq_45677671的博客
05-20 1049
State状态（state）定义状态修改状态状态提升同步和异步 状态（state） 如果将 state 与 vue 中的某个点做类比的话，则其相当于 vue 组件中的 data ，作用就是用于存储当前组件中需要用到的数据。 状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理) 定义状态 切记：不要直接通过this.state.xxx = xxxx形式去更改state的值。否则会包警告，警告如下：Do no
react函数组件和类组件区别并详细介绍
03-14
React 函数组件和类组件的主要区别在于它们的定义方式和使用方式。函数组件是一个纯函数，它接收一个 props 对象作为参数，并返回一个 React 元素。而类组件则是一个 ES6 类，它继承自 React.Component，并且必须实现一个 render 方法，该方法返回一个 React 元素。 函数组件通常比类组件更简洁，因为它们不需要定义一个类，也不需要使用 this 关键字来访问 props 和 state。另外，函数组件也更容易进行测试和重构，因为它们没有副作用。 然而，类组件也有它们的优点。例如，它们可以使用 state 和生命周期方法来管理组件的状态和行为。此外，类组件还可以使用 ref 属性来访问 DOM 元素或组件实例。 总之，React 函数组件和类组件都有各自的优点和适用场景。在编写组件时，应该根据具体情况选择合适的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值