React第二篇class类组件

已于 2023-12-03 20:47:51 修改
阅读量250 收藏
点赞数 1
文章标签： react.js 前端 前端框架
于 2023-12-03 20:43:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55896343/article/details/134769505
版权

React第二篇class类组件

在这里插入图片描述

Alex

简介：React是facebook(现在叫Meta)出的针对视图层的library库，目前最新版本18X
React官网- 点我去官网
通过这篇文章你会学到以下知识：

  1. 你将会学习到
  2. 如何创建和嵌套组件
  3. 如何添加标签和样式
  4. 如何显示数据
  5. 如何渲染条件和列表
  6. 如何对事件做出响应并更新界面
  7. 如何在组件间共享数据

1、首先我们在HML中使用react

我们需要准备三个东西

babel 作用是代码解析何jsx编译
react 核心库
react-dom 是在浏览器种使用react的必备插件

上面的第三方库 可以到NPM去下载(注意版本)
NPM-点我去NPM官网

2、 class类组件定义

class定义的组件，又叫类组件，这种组件可有自己的局部状态和生命周期
class定义的组件都需要继承自Component或者PereComponent(相当于function定义的组件中为组件添加一个memo缓存效果)

每一个class定义的组件都需要一个render方法，这个方法返回当前组件的html内容
在class定义的组件中，如果改变state数据，需要调用setState方法
setState是异步的，其实它可以接收两个参数
参数一 表示要改变的数据
参数二 表示数据改变之后的回调函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class定义组件</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.development.js"></script>
    <script src="./libs/react-dom.development.js"></script>
    <script type="text/babel">
      // 两种方式定义的组件是可以嵌套使用的
      class Counter extends React.Component {
        constructor(props) {
          super(props);
          // 可以通过state属性为组件定义状态数据
          this.state = {
            count: 1,
            name: "这是一个计数器",
          };
        }
       
        render() {
          // 每一次数据或者属性改变的时候这个方法会重新执行
          // console.log("render方法执行了");
          return (
            <>
              <h1>这是一个组件---{this.state.name}</h1>
              <h2>count值为:{this.state.count}</h2>
              <button
                onClick={() => {
                  this.setState(
                    {
                      count: this.state.count + 1,
                    },
                    function () {
                      console.log(this.state.count);
                    }
                  );
                  // console.log(this.state.count);
                }}
              >
                +1
              </button>
            </>
          );
        }
      }
      const App = () => {
        return (
          <>
            <Counter />
          </>
        );
      };

      ReactDOM.render(<App />, document.querySelector("#app"));
    </script>
  </body>
</html>

3、 this指向问题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>组件传参</title>
</head>

<body>
  <div id="app"></div>
  <script src="./libs/babel.min.js"></script>
  <script src="./libs/react.development.js"></script>
  <script src="./libs/react-dom.development.js"></script>
  <script type="text/babel">
    const { Component } = React;
    class Counter extends Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 1,
        };
        // 在class定义的组件中绑定this的时候，建议使用这种方案
        // this.clickHandle3 = this.clickHandle3.bind(this);
      }
      clickHandle() {
        console.log(this);
      }
      clickHandle2() {
        console.log(this);
      }
      clickHandle3() {
        console.log(this);
      }
      render() {
        return (
          <>
            <h1>当前的计数值为:{this.state.count}</h1>
            <button
              onClick={() => {
                console.log(this);
              }}
            >
              改变
            </button>
            <button onClick={this.clickHandle.bind(this)}>改变2</button>
            <button onClick={() => this.clickHandle2()}>改变3</button>
            <button onClick={this.clickHandle3}>改变4</button>
          </>
        );
      }
    }
    const App = () => {
      return (
        <>
          <Counter></Counter>
        </>
      );
    };

    ReactDOM.render(<App />, document.querySelector("#app"));
  </script>
</body>

</html>

4、 class类组件的组件传参（与function组件传参一样）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件传参</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.development.js"></script>
    <script src="./libs/react-dom.development.js"></script>
    <script type="text/babel">
      const context = React.createContext(); // 创建
      class Counter extends React.Component {
        constructor(props) {
          super(props);
          this.state = { count: 1 };
        }
        render() {
          console.log(this.context);
          return (
            <>
              <h1>计数器的值为:{this.state.count}</h1>
              <h3>父组件传过来的步长为:{this.props.step}</h3>
              <p>全局context中的数据为:{this.context.name}</p>
              <button
                onClick={() => {
                  this.props.showNum("998");
                }}
              >
                改变
              </button>
            </>
          );
        }
      }
      Counter.contextType = context; // 只需要为组件设置contextType属性
      const App = () => {
        const [step, gaiBianStep] = React.useState(1);
        const showNum = (num) => {
          alert(num);
        };
        return (
          <>
            <input
              type="range"
              min="1"
              max="10"
              step="1"
              defaultValue={step}
              onChange={(e) => {
                gaiBianStep(e.currentTarget.value * 1);
              }}
            />
            <Counter step={step} showNum={showNum} />
          </>
        );
      };

      ReactDOM.render(
        <context.Provider value={{ name: "我是数据" }}>
          <App />
        </context.Provider>,
        document.querySelector("#app")
      );
    </script>
  </body>
</html>

5、PureComponent（缓存一个组件）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PureComponent</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.development.js"></script>
    <script src="./libs/react-dom.development.js"></script>
    <script type="text/babel">
      // 在项目中建议使用PureComponent实现组件的继承
      class Item extends React.PureComponent {
        constructor(props) {
          super(props);
        }
        render() {
          console.log("组件渲染了");
          return (
            <>
              <h2>{this.props.name}</h2>
            </>
          );
        }
      }
      const App = () => {
        const [list, setList] = React.useState([]);
        return (
          <>
            <input
              type="text"
              placeholder="请输入内容"
              onKeyUp={(e) => {
                if (e.keyCode === 13 && e.currentTarget.value) {
                  setList([
                    ...list,
                    { id: Date.now(), name: e.currentTarget.value },
                  ]);
                }
              }}
            />
            <hr />
            {list.map((item) => (
              <Item key={item.id} {...item} />
            ))}
          </>
        );
      };

      ReactDOM.render(<App />, document.querySelector("#app"));
    </script>
  </body>
</html>

6、组件的生命周期

  1. constructor----构造器
  2. componentWillMount —将要挂载
  3. componentDidMount —挂在完成
  4. componentWillReceiveProps — 将要接受新的属性
  5. shouldComponentUpdate 是否允许更新
  6. componentWillUpdate— 将要更新
  7. componentDidUpdate —更新完成
  8. componentWillUnmount —销毁
  9. render—渲染

当页面初次渲染是执行顺序：

  1. constructor----构造器
  2. componentWillMount —将要挂载
  3. render—渲染
  4. componentDidMount —挂在完成

当页面更新的是执行顺序：
第一种情况

  1. shouldComponentUpdate 是否允许更新 （返回 true -----是）
  2. componentWillUpdate— 将要更新
  3. render—渲染
  4. componentDidUpdate —更新完成

第二种情况

  1. shouldComponentUpdate 是否允许更新 （返回false -----否） 页面不会在更新

组件之间进行嵌套的时候生命周期钩子函数的执行顺序：

  1. 父组件-constructor----构造器
  2. 父组件-componentWillMount —将要挂载
  3. 父组件-render—渲染
  4. 子组件-constructor----构造器
  5. 子组件-componentWillMount —将要挂载
  6. 子组件- render—渲染
  7. 子组件 componentDidUpdate —更新完成
  8. 父组件componentDidUpdate —更新完成
  9. 总结：先执行父组件的构造器，将要挂载，执行到render的时候，开始解析子组件的生命周期钩子函数，当所有的子组件都挂载完成，在执行父组件的挂载完成

两个注意点：
一、属性或者数据改变的时候render会重新执行， 在render中不能改变数据，会引起死循环
二、 非常重要，主要用来做组件性能优化，
那些不需要在页面中展示的数据改变的时候可以返回false
返回false的时候后续的更新阶段不会再执行
返回true那么后续的更新阶段就会执行
这个方法接收两个参数(下一次的属性, 下一次的状态)
shouldComponentUpdate(nextProps, nextState) {
console.log(“shouldComponentUpdate”);
console.log(nextProps);
console.log(nextState);
return false;
}

在这里插入图片描述

7、refs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>refs</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.development.js"></script>
    <script src="./libs/react-dom.development.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        componentDidMount() {
          console.log((this.refs.ppp.style.color = "red"));
        }
        render() {
          return (
            <>
              <h1>这是一个组件</h1>
              <p ref="ppp">我是一段很长的文字</p>
            </>
          );
        }
      }

      ReactDOM.render(<App />, document.querySelector("#app"));
    </script>
  </body>
</html>

8、练习todolist

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>todo-list</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.development.js"></script>
    <script src="./libs/react-dom.development.js"></script>
    <script type="text/babel">
      const { PureComponent } = React;
      class TodoInput extends PureComponent {
        constructor(props) {
          super(props);
          this.saveHandle = this.saveHandle.bind(this);
        }
        saveHandle(e) {
          if (e.keyCode === 13 && e.currentTarget.value) {
            this.props.save(e.currentTarget.value);
            e.currentTarget.value = "";
          }
        }
        render() {
          return <input placeholder="请输入内容" onKeyUp={this.saveHandle} />;
        }
      }
      class Todo extends PureComponent {
        constructor(props) {
          super(props);
        }
        render() {
          return (
            <>
              <h3>{this.props.content}</h3>
              {this.props.isEnd ? null : (
                <button
                  onClick={() => {
                    this.props.end(this.props.id);
                  }}
                >
                  完成
                </button>
              )}
              <button>删除</button>
              <hr />
            </>
          );
        }
      }
      class Todos extends PureComponent {
        constructor(props) {
          super(props);
        }
        render() {
          return (
            <>
              {this.props.list.map((item) => (
                <Todo key={item.id} {...item} end={this.props.end} />
              ))}
            </>
          );
        }
      }
      class TodoList extends PureComponent {
        constructor(props) {
          super(props);
          this.state = {
            list: [],
          };
          this.save = this.save.bind(this);
          this.end = this.end.bind(this);
        }
        save(txt) {
          this.setState({
            list: [
              ...this.state.list,
              { id: Date.now(), content: txt, isEnd: false },
            ],
          });
        }
        end(id) {
          this.setState({
            list: this.state.list.map((item) =>
              item.id == id ? { ...item, isEnd: true } : { ...item }
            ),
          });
        }
        render() {
          return (
            <>
              <TodoInput save={this.save} />
              <hr />
              <Todos list={this.state.list} end={this.end} />
            </>
          );
        }
      }
      const App = () => {
        return (
          <>
            <TodoList />
          </>
        );
      };

      ReactDOM.render(<App />, document.querySelector("#app"));
    </script>
  </body>
</html>
棒5
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react-classes:一个在React中用于类名操作的轻量级包装器
05-02
React班 警告 截至2018年8月18日，此项目已折旧且未维护。 在React版本0.13.0中，已React.addons.classSet ；在React版本4.0中，已从React软件包中删除了附加组件。 我建议使用包作为替代。 概述 通过允许指定基类，该模块为React中的添加了附加功能。 例子 当表达式为true时，此组件将始终以.foo基类呈现，并具有.bar和.baz的类。 render: function() { var classes = this.getClass('foo', { 'bar': this.props.bar === true, 'baz': this.props.baz === true }); return ( <div className={classes}></div> ); } 快速开始 使用n
React的class组件及属性详解
Learn-anything.cn
11-17 5524
一、class组件 React 有两种组件：class组件 和 函数组件。class组件需要继承 React.Component，用法如下： class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 1、必须要重写的方法 每一个继承 React.Component 的组件，都必须重写 render() 方法
React学习5(React class 组件)
qq_40600414的博客
08-25 2385
react class组件的生命周期
React组件——类组件
m0_58471238的博客
01-15 6620
React组件——类组件
React入门之React_渲染基础用法和class实例写法
最新发布
slom_fxt的博客
02-29 462
React_渲染基础用法和class实例写法
React组件设计模式之组合组件应用实例分析
10-15
第二 第三 ``` 通过这种方式，组合组件提高了代码的可读性和可维护性，降低了组件间的耦合。然而，需要注意的是，组合组件并不适用于所有场景，当组件间的交互过于复杂时，可能需要考虑其他设计模式，如高阶组件...
详解React之父子组件传递和其它一些要点
08-27
* 组件第二阶段：组件运行时候的状态变化引发组件的更新和重新渲染到更新完成 * 组件第三阶段：卸载组件 2. JSX 语法 JSX 是 React 中的一种语法语法，它可以将 JavaScript 和 HTML 代码混合在一起。JSX 的基本...
react-react拖动组件
08-15
总结来说，React中的拖放组件实现主要依赖于第三方库，如`react-dnd`，通过定义DragSource和DropTarget，结合connectors将两者关联，从而实现用户友好的拖放交互。这个过程涉及到对拖放生命周期的理解和组件的适配，...
react-web-component:使用React创建Web组件
05-23
要创建带有react-web-component ，只需将React组件作为第一个参数传递给ReactWebComponent.create ，并将您要创建的Web组件的名称作为第二个参数。 import React from 'react' ; import ReactWebComponent from '...
React 组件生命周期
12-13
React 组件生命周期是React开发中不可或缺的一部分，它定义了组件从创建到销毁的各个阶段以及在这些阶段可以执行的操作。了解并熟练掌握组件生命周期对于优化性能、管理组件状态以及实现复杂的交互逻辑至关重要。 ...
React.js入门学习第一篇
11-23
它的核心概念是组件化，而JSX则是React中用于创建组件的一种特殊语法，它结合了JavaScript和XML的特性，让代码更加易读和直观。 **JSX介绍：** 1. **定义**：JSX（JavaScript XML）是React中编写组件的一种方式，...
react 兄弟组件如何调用对方的方法示例
12-09
最近有一个场景是Child2组件点击让Child1组件里面的state的值发生改变,Child1是一个公用组件，把里面的state值改为props传递，修改内容太多，容易出错，就想找其他的方法来解决兄弟组件调用方法问题，下面看代码: ...
react-modal:在react中创建的模态组件
05-14
class MyModal extends React.Component { constructor(props) { super(props); this.state = { isOpen: false }; } openModal = () => this.setState({ isOpen: true }); closeModal = () => this.setState...
12.react_countries_class
03-04
【标题】"12.react_countries_class" 指的可能是一个React项目，其中涉及了类组件（Class Components）的使用，用于展示或管理与国家相关的数据。在这个项目中，开发者可能构建了一个应用，该应用利用React的Class ...
react-form:示例表单按钮React组件
07-01
1. **定义组件**：使用React的`function`或`class`来定义一个组件，例如`FormButton`。这个组件可以接收props，比如按钮的文字、颜色、大小等。 ```jsx function FormButton({ text, onClick }) { return ...
1. react 函数式组件 class组件 1
weixin_42508745的博客
09-01 701
组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。 文章目录函数式组件class式组件自定义组件接受父级传来的属性Props 只读性state局部私有属性（完全受控于当前组件）使用Props实现一个时钟在class组件中使用局部属性state将生命周期添加到class组件中正确的使用state setState()数据是向下流动的 函数式组件
React Class组件生命周期详解
qq_43293207的博客
05-23 2482
1. 旧版生命周期（v16.3之前） 组件挂载过程 （1） constructor() constructor 构造方法常用来初始化state constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。 当存在constructor的时候必须手动调用super方法。如果在constructor中想使用this关键字，就必须先调用super方法。在constructor中如果要
【React系列】ES6学习笔记（三）Class
川峰的博客
01-05 1356
Class 可以通过。
React-class ——React 组件、 React Props（属性传值）、React State（状态）
qq_52301431的博客
10-11 1856
这是标题2这是标题2);}}方式2：通过React自定义组件（DOM元素）：**函数定义**//箭头函数const MyApp = () => 这是一个段落
react使用useState hook实现class组件中的setState方法
05-26
在 React 函数组件中，可以使用 useState hook 来实现类组件中的 setState 方法。 useState hook 接收一个初始值，并返回一个数组，其中第一个元素是当前的状态值，第二个元素是更新状态值的函数。可以通过调用这个函数来更新状态值，类似于调用类组件中的 setState 方法。 下面是一个示例代码： ```jsx import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` 上面的代码中，useState hook 接收 0 作为初始值，返回 count 和 setCount 两个变量。count 代表当前状态值，setCount 是一个更新状态值的函数，可以通过调用 setCount 来更新 count 的值。 在按钮的 onClick 回调函数中，调用 setCount 函数并传入 count + 1 作为参数，从而更新 count 的值。 这样就实现了类组件中 setState 方法的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值