Day21-State

前言

昨日我们学会了Props，而Props是由外传进来的资料，进而改变组件。而组件本身的状态我们称为State。

另外昨日忘记说明React对於Props是唯读的，跟Vue可以传递资料给父组件有些微差异。

State

不同於Props是唯读，State是可以进行操作改变资料。

而在React中，没错!!!，聪明如你应该想到React中的State = 资料，但我们通常会称为状态(State)。

以下对话:
A: 这个组件的状态怎麽有点奇怪
B: 你先把状态设为预设值看有没有变化

那要如何使用State???

useState

在function component中如果要使用State，我们必须从React中引入useState

import {useState} from 'react'

我们把useState打印出来看看

  const a = useState()
  console.log(a);

可以看到useState是个array，并且useState[0]为初始值，useState[1]为修改值的函式。

当我们把useState初始值设为100，即代表当前组件的State为100

  const a = useState(100)
  console.log(a);

但你想喔，如果我们每次使用State都要用useState[0]、useState[1]操作我们的状态，是不是很麻烦???

我们可以使用解构赋值来取用阵列，并且修改函式我们会使用驼峰写法并且set为前缀。

import {useState} from 'react'

function App() {
  const [number, setNumber] = useState(100)
  return (
    <div className="App">
      {number} //100
    </div>
  );
}
export default App;

setState

我们新增一个Change的button并且绑定onClick事件。

这边注意一下在React中的事件通常为驼峰写法!!!

并且每按一次我们都会使number + 1。

import {useState} from 'react'

function App() {
  const [number, setNumber] = useState(100)
  const changFN = () => {
    setNumber(number + 1)
  }
  return (
    <div className="App">
      {number}
      <button onClick={changFN}>Change</button>
    </div>
  );
}
export default App;

各位可以实际操作一次，并且打开开发者检查。

你会发现，当我们每次更改number的数值，只会有number的element做更动，这也是Virtual DOM能够使性能优化更好。