day03--react中对state的理解

一、react中的state

1.state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)

2.组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
注意:

(1)组件中的render方法中的this为组件实例对象

(2)组件自定义的方法中this为undefined,如何解决?

a.强制绑定this:通过函数对象的bind()

b.箭头函数

(3) 状态数据,不能直接修改或更新。

函数式组件:this为undefined

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="/react-development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="/react-dom-development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建函数式组件
        function Demo() {
            console.log(this);//undefined
            return <h2>我是用函数定义的组件</h2>
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo />, document.getElementById('test'))
        /**
         * 执行了ReactDOM.render(<MyComponent/>.....)之后,发生了什么?
         * 1.React解析组件标签,找到MyComponent组件。
         * 2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
         * 
         */
    </script>
</body>

</html>

类式组件

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="/react-development.js"></script>
   <!-- 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="/react-dom-development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class MyComponent extends React.Component {
            render() {
                console.log(this);
                // render是放在哪里的?MyComponent的原型对象上,供实例使用。
                // render()中的this指向的是MyComponent组件实例对象
                return <h2>我是用函数定义的组件</h2>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /**
         * 执行了ReactDOM.render(<MyComponent/>.....)之后,发生了什么?
         * 1.React解析组件标签,找到MyComponent组件。
         * 2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用原型链上的render方法
         * 3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
         */
    </script>
</body>

</html>

类式组件的this

相关推荐
前端啊龙几秒前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠4 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds24 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js