react中的更新界面问题

这个 更新界面也就是像我们在vue中使用的响应式数据的问题 因为vue是数据渲染视图 这两个框架说法 概念不同 但是其实主题解决的问题还是相同的

通常你会希望你的组件 “记住” 一些信息并展示出来，比如一个按钮被点击的次数。要做到这一点，你需要在你的组件中添加 state。

首先，从 React 引入 useState：

import { useState } from 'react';

现在你可以在你的组件中声明一个 state 变量：

  const [count, setCount] = useState(0);

你将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。你可以给它们起任何名字，但按照惯例会像 [something, setSomething] 这样为它们命名。

第一次显示按钮时，count 的值为 0，因为你把 0 传给了 useState()。当你想改变 state 时，调用 setCount() 并将新的值传递给它。点击该按钮计数器将递增：

import React from 'react'
import { useState } from 'react';
import { View } from '@tarojs/components'
import './index.scss'

function Index() {
    const user = {
        name: 'Hedy Lamarr',
        imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
        imageSize: 90,
        isLogin: false
    };
    const products = [
        { title: 'Cabbage', id: 1 },
        { title: 'Garlic', id: 2 },
        { title: 'Apple', id: 3 },
    ];

    const [count, setCount] = useState(0)

    function handleClick() {
        setCount(count + 1)
    }
    if (user.isLogin) {
        user.name = '12345'

    } else {
        user.name = '16789'

    }
    // function handleClick() {
    //     alert("are you ok")
    //     console.log(alert("are you ok"));

    // }


    const listItems = products.map(products =>
        <li key={products.id} onClick={handleClick}>{products.title}</li>
    )
    return (
        <View className="nutui-react-demo">
            测试组件{count}
            <h1>{user.imageSize}</h1>
            <p className='text-red'>{user.name}</p>
            <a className='text-red' href="https://www.baidu.com">百度</a>
            <img src={user.imageUrl} alt={'Photo of ' + user.name}
                style={{
                    width: user.imageSize,
                    height: user.imageSize
                }} />

            <div>{user.imageSize > 100 ? '大于100' : '小于100'}</div>
            <ul>
                {listItems}
            </ul>

        </View>
    )
}

export default Index

 

React 将再次调用你的组件函数。第一次 count 变成 1。接着点击会变成 2。继续点击会逐步递增。

如果你多次渲染同一个组件，每个组件都会拥有自己的 state。你可以尝试点击不同的按钮：

注意，每个按钮会 “记住” 自己的 count，而不影响其他按钮。

这个和vue中说的ref reactive  让某些数据 能够变成响应式数据 这样就能够实现数据渲染视图的特性 实现前端开发需求