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值作为参数。