react中state状态

最新推荐文章于 2024-07-16 14:30:20 发布

鲤忆

最新推荐文章于 2024-07-16 14:30:20 发布

阅读量85

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_62487693/article/details/129757128

版权

react 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app"></div>
    <script src="../0assets/新版本/react.dev.18.2.js"></script>
    <script src="../0assets/新版本/react-dom-dev.js"></script>
    <script src="../0assets/新版本/prop-type.js"></script>
    <script src="../0assets/新版本/babel.min.js"></script>
    <script type="text/babel">
        function App() {
           
            let [msg, setMsg] = React.useState("hellow")
            // let arr =React.useState(true);
            setTimeout(() => {
                setMsg("hellow word")
            //   console.log(arr[0]);
            //    console.log(arr[1](false));
            }, 1000)
            return (
                <div>
                    <h1>{msg}</h1>

                </div>
            )
        }


        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
   
</body>

</html>

/**
             * useState() 是react中的 hooks函数
             * 作用：创建state状态
             * 参数：js任意类型数据
             * 返回值：数组
             *         数组[0] 存放响应式数据（state）
             *          数组[1] 修改响应式的函数
             * 将更新中的，数组[1]函数的实参，实现修改数组[0]的赋值
             * 注意：1.hooks函数只能在函数组件中使用，
             *        2.当页面中绑定的state状态发生更新时，组件会重新渲染，函数会重新执行
             *
             * React中内置许多 hooks函数分类：
             * 1. 内置：useState
             * 2.自定义
             * hooks特点：
             * 1.必须以use开头函数
             * 2.只能在函数组件或者hooks函数内部使用，其他地方无效
            */

<!--
        1.普通变量可以渲染到页面上，为什么还需要响应式变量？
            因为普通变量只有静态效果，
            实际开发希望页面的交互应当有响应式数据控制

        2.页面绑定普通变量还是响应式变量该如何区分？
            当页面内容只是展示效果并且是静态的没有任何动态交互，使用普通变量
            只要存在动态交互，页面就应该绑定响应式变量

3.函数组件中如何创建响应式变量？
let [msg,setMsg] =React.useState("hellow")

4.什么是响应式？
能够驱动视图变化的就是响应式

面试题：
1.react中响应式实现的原理是什么？

1.开发者只需关注状态转移（数据），当状态发生变化，React框架会自动根据新的状态重新构建UI。
2.React框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过Diff算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），从而避免整棵树重构，提高性能。状态变化后React框架并不会立即去计算并渲染DOM树的变化部分，相反，React会在DOM的基础上建立一个抽象层，即虚拟DOM树，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到真实DOM中，而不是每次改变都去操作一下DOM。

为什么不能每次改变都直接去操作DOM树？这是因为在浏览器中每一次DOM操作都有可能引起浏览器的重绘或回流：
* 如果DOM只是外观风格发生变化，如颜色变化，会导致浏览器重绘界面。
* 如果DOM树的结构发生变化，如尺寸、布局、节点隐藏等导致，浏览器就需要回流（及重新排版布局）。
而浏览器的重绘和回流都是比较昂贵的操作，如果每一次改变都直接对DOM进行操作，这会带来性能问题，而批量操作只会触发一次DOM更新。

2.谈一谈你对react中state状态的理解

在React中，state指的是组件内部维护的一个状态，它可以存储组件的数据，控制组件的行为和渲染。state是一个对象，可以通过this.state来访问它，通过this.setState来更新它。当组件的state发生改变时，React会自动重新渲染组件，以反映出最新的状态。通过使用state，我们可以构建出可交互的、动态的React组件。

3.react中三大属性是什么？

state prop ref

-->

鲤忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react中state状态

*** useState() 是react中的 hooks函数* 作用：创建state状态* 参数：js任意类型数据* 返回值：数组* 数组[0] 存放响应式数据（state）* 数组[1] 修改响应式的函数* 将更新中的，数组[1]函数的实参，实现修改数组[0]的赋值* 注意：1.hooks函数只能在函数组件中使用，* 2.当页面中绑定的state状态发生更新时，组件会重新渲染，函数会重新执行。
复制链接

扫一扫