日期:2022年10月3日

state

props中的所有属性都是不可变的,这使得React组件不能随着props的改变而改变。但在实际的开发中,我们更希望的是数据发生变化时,页面也会随着数据一起变化。React为我们提供了state用来解决这个问题。

state和props类似,都是一种存储属性的方式,但是不同点在于state只属于当前组件,其他组件无法访问。并且state是可变的,当其发生变化后组件会自动重新渲染,以使变化在页面中呈现。

现有如下组件Clock:

import React from 'react';
​
const Clock = () => {
​
    let date = new Date().toLocaleTimeString();
​
    const clickHandler = ()=>{
​
    };
​
    return (
        <div>
            {date}
            <div>
                <button onClick={clickHandler}>刷新</button>
            </div>
        </div>
    );
};
​
export default Clock;
​

现在我们希望点击按钮以后,时间可以刷新直接显示一个当前的最新日期。如果直接在clickHandler中修改date的值是无效的,像这样:

//省略
​
const clickHandler = ()=>{
    date = new Date().toLocaleTimeString();
    console.log(date);
};
​
//省略

state也可以被认为是一个变量,但是它的定义方式不太一样,我们以函数组件为例来介绍state的使用方式(类组件咱们后边再说)。在函数中使用state我们需要使用一种钩子(hook)函数。钩子函数可以在函数组件中“勾出”React的特性,换句话说我们要用一个函数“勾出”state。

语法:

const [state, setState] = useState(initialState);

通过钩子函数useState()勾出state,useState()中需要传递一个初始值,这个值就是你希望在变量中存储的值。函数会返回一个数组,数组中有两个元素,第一个元素是存储了值的变量,第二个元素是一个函数用来对值进行修改。比如上边的案例,可以这样修改:

import React, {useState} from 'react';

const Clock = () => {

   const [date, setDate] = useState(new Date().toLocaleTimeString());

   const clickHandler = ()=>{
       setDate(new Date().toLocaleTimeString());
  };

   return (
       <div>
          {date}
           <div>
               <button onClick={clickHandler}>刷新</button>
           </div>
       </div>
  );
};

export default Clock;

使用useState()“勾出”的变量就是一个普通变量,它里边存储了初始化的值,这个变量和其他变量没什么大区别,同样修改这个变量的值也不会对组件产生实质性的影响,所以不要尝试直接为state赋值。useState()“勾出”的函数用来修改state的值,他需要一个新的state值作为参数,调用后会触发组件的重新渲染,从而使得页面刷新,在每次的重新渲染中都会使用新的state值作为参数。

5 2 投票数
文章评分
订阅评论
提醒
guest

1 评论
最旧
最新 最多投票
内联反馈
查看所有评论
Chin
3 月 前

打卡

1
0
希望看到您的想法,请您发表评论x