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

相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript