day03--react中对state的理解

news2024/12/23 11:06:25

一、react中的state

1.state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
2.组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）
注意：
（1）组件中的render方法中的this为组件实例对象
（2）组件自定义的方法中this为undefined,如何解决？
a.强制绑定this：通过函数对象的bind()
b.箭头函数
(3) 状态数据，不能直接修改或更新。

函数式组件：this为undefined

<!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>

类式组件

<!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>