React 18 如何定义变量，及赋值 与渲染

React 18 中，定义变量、赋值和渲染的方式因变量的用途和作用域不同而有所差异，下面为你详细介绍不同场景下的实现方法。

1. 函数组件内定义普通变量

在函数组件里，你可以像在普通 JavaScript 函数中一样定义变量，并且这些变量会在每次组件重新渲染时重新创建。

import React from 'react';

const MyComponent = () => {
    // 定义普通变量并赋值
    const message = 'Hello, React 18!';

    return (
        <div>
            {/* 渲染变量 */}
            <p>{message}</p>
        </div>
    );
};

export default MyComponent;

2. 使用 useState Hook 定义状态变量

若要在组件中保存可以改变的数据，就需要使用 useState Hook。 useState 返回一个数组，包含当前状态值和一个用于更新状态的函数。

import React, { useState } from 'react';

const Counter = () => {
    // 定义状态变量 count 并初始化为 0
    const [count, setCount] = useState(0);

    const increment = () => {
        // 更新状态变量
        setCount(count + 1);
    };

    return (
        <div>
            {/* 渲染状态变量 */}
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
};

export default Counter;

3. 使用 useRef Hook 定义可变变量

useRef 可以创建一个可变的对象，在组件的整个生命周期内保持不变。常用于存储不需要触发重新渲染的变量，例如 DOM 元素引用。

import React, { useRef } from 'react';

const InputComponent = () => {
    // 定义一个可变变量 inputRef
    const inputRef = useRef(null);

    const handleClick = () => {
        // 通过 inputRef.current 访问 DOM 元素
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={handleClick}>Focus Input</button>
        </div>
    );
};

export default InputComponent;

  const captchaUrls = useRef('data:image/jpeg;base64,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');

<Image src={captchaUrls.current} alt="验证码" style={{ height: '32px',width: '100px'  }} onClick={onCaptchaChange} />

4. 类组件中定义变量和状态

import React, { Component } from 'react';

class MyClassComponent extends Component {
    constructor(props) {
        super(props);
        // 定义状态变量
        this.state = {
            message: 'Hello from Class Component!'
        };
        // 定义实例变量
        this.counter = 0;
    }

    handleClick = () => {
        // 更新状态变量
        this.setState({
            message: 'State updated!'
        });
        // 更新实例变量
        this.counter++;
        console.log('Counter:', this.counter);
    };

    render() {
        return (
            <div>
                {/* 渲染状态变量 */}
                <p>{this.state.message}</p>
                <button onClick={this.handleClick}>Update State</button>
            </div>
        );
    }
}

export default MyClassComponent;

总结

• - 普通变量 ：适用于不需要在组件重新渲染时保留值的情况。
• - 状态变量 ( useState ) ：用于存储会改变的数据，并且在数据更新时触发组件重新渲染。
• - 可变变量 ( useRef ) ：用于存储不需要触发重新渲染的可变数据，如 DOM 元素引用。
• - 类组件变量 ：在类组件中，可使用 this.state 存储状态，使用实例变量存储其他数据。