React-04React组件状态（state），构造器初始化state以及数据读取，添加点击事件并更改state状态值

哟哟耶耶2025-04-09 3:08

1.React组件状态（state）

组件可以拥有状态（state），它是组件数据的私有部分，可以用来管理动态数据。状态仅适用于类组件，或者使用 React 的 Hook 时可以在函数组件中使用。

注意

  • 组件中render方法中的this为组件实例对象
  • 组件自定义方法中的this指向为undefined解决方法
  • 强制绑定this,通过函数的bind()
  • 赋值+箭头函数（this指向外找）
  • 状态数据：不能直接修改或更新，使用setState修改状态值

2. 构造器初始化state以及数据读取

利用构造器初始化state，以及state中数据的读取，具体例子如下

html 复制代码 
<!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>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1. 创建一个类式组件 extends React.Component 继承react内置的类
        class Weather extends React.Component{
            // 构造器中初始化状态
            constructor(props) {
                // 调用父类的构造器
                super(props);
                this.state = {
                    temperature: 35,
                    weather: '晴'
                }
            }
            render () {
                console.log(this);
                return <h1>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气热</h1>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Weather />,document.getElementById('test'))
    </script>
</body>

</html>

3.state初始化数据 添加点击事件onClick 更新数据

重点

3.1构造器中绑定事件处理函数，bind更改this指向问题
javascript 复制代码 
 this.change = this.changeWeather.bind(this)
3.2render中标签添加点击事件
javascript 复制代码 
render () {
      // 读取状态与添加点击状态 this=>Weather组件实例对象
      return <h1 onClick={this.change}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
       }
3.3setState方法修改state状态中的值
javascript 复制代码 
  changeWeather() {
                // 获取初始的值
                const dataList = this.state              
                // 解决方法：1. 手动绑定this 2. 使用箭头函数
                // this.setState({temperature: 36, weather: '多云', isHot: false})
                // 或者使用箭头函数
                this.setState((prevState) => ({
                    temperature: 36,
                    weather: '多云',
                    isHot: !dataList.isHot
                }))
            }
3.4整体代码构造函数标准代码模式
html 复制代码 
<!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>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1. 创建一个类式组件 extends React.Component 继承react内置的类
        class Weather extends React.Component{
            // 构造器中初始化状态----调用1次 
            constructor(props) {
                // 调用父类的构造器
                super(props);
                this.state = {
                    temperature: 35,
                    weather: '晴',
                    isHot:true
                }
                // 绑定事件处理函数 changeWeather中的this指向问题
                this.change = this.changeWeather.bind(this)
            }
            
            // 调用---N+1次 N为state更新次数  1为初始化调用1次
            render () {
                // 读取状态与添加点击状态 this=>Weather组件实例对象
                return <h1 onClick={this.change}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
            }

            // 事件处理函数---点几次就调用几次
            changeWeather() {
                // 点击事件 changeWeather--Weather原型对象上，实例使用
                // changeWeather作为onClick事件的回调函数，不是通过实例调用而是直接调用
                // 类中方法默认开启局部严格模式，所以changWeather中的this是undefined 
                // 获取初始的值
                const dataList = this.state
                 //注意：状态state不可直接修改，需要通过setState方法修改  更新是一种合并操作，而不是直接替换
                // 解决方法：1. 手动绑定this 2. 使用箭头函数
                // this.setState({temperature: 36, weather: '多云', isHot: false})
                // 或者使用箭头函数
                this.setState((prevState) => ({
                    temperature: 36,
                    weather: '多云',
                    isHot: !dataList.isHot
                }))
            }
        }

        // 2.渲染组件到页面
        ReactDOM.render(<Weather />,document.getElementById('test'))
        
    </script>
</body>

</html>
3.5 state常用编码模式非构造函数模式
html 复制代码 
<!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>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1. 创建一个类式组件 extends React.Component 继承react内置的类
        class Weather extends React.Component{
            // 初始化状态
            state= {
                temperature: 35,
                weather: '晴',
                isHot:true
            }
            render () {
                return <h1 onClick={this.changeWeather}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
            }
            // 点击事件-赋值语句+箭头函数  箭头函数向外找this指向
            changeWeather = ()=> {
                const dataList = this.state
                this.setState((prevState) => ({
                    temperature: 36,
                    weather: '多云',
                    isHot: !dataList.isHot
                }))
            }
        }

        // 组件渲染
        ReactDOM.render(<Weather />,document.getElementById('test'))
        
    </script>
</body>

</html>
相关推荐
crary,记忆8 分钟前
Angular如何让整个项目的所有页面能够整体缩小一定的比例？
javascript·ecmascript·angular.js
Mintopia22 分钟前
🤖 算法偏见修正：WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia25 分钟前
🧩 TypeScript防御性编程：让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo28 分钟前
🔔 Flutter 本地通知： 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊33 分钟前
一、redis安装（单机）和使用
前端·数据库·redis
江城开朗的豌豆35 分钟前
小程序与H5的“握手言和”：无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼35 分钟前
React 19 发布一年后：对比 React 18，带来了哪些惊喜与变革
前端·react.js
你的电影很有趣39 分钟前
lesson73：Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆40 分钟前
小程序静默更新？用户却无感？一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..41 分钟前
VUE工程化开发模式
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示082025软件测试面试八股文（含答案+文档）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10Labelme从安装到标注：零基础完整指南