react基础1——useState

1、useState基础使用

useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染效果。

本质：和普通js变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

const [count, setCount] = useState(0)

1. useState是一个函数，返回值是一个数组
2. 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3. useState的参数将作为count的初始值
4. [count, setCount]这里的写法是一个解构赋值，useState返回值是一个数组
   注意：
   （1）可以自定义名字，保持语义化即可
   （2）顺序不可以调换，第一个参数就是数据状态，第二个参数就是修改数据的方法
5. setCount函数，作用用来修改count，依旧保持不能直接修改原值，还是生成一个新值替换原值
   setCount(基于原值计算得到的新值)
6. count和setCount是一对，是绑定在一起的，setCount只能用来修改对应的count值

当调用setCount的时候，更新过程

首次渲染

1. 首次被渲染的时候，组件内部的代码会被执行一次
2. 其中useState也会跟着执行，这里重点注意，初始值只在首次渲染时生效

更新渲染 setCount都会更新

1. app组件会再次渲染，这个函数会再次执行
2. useState再次执行时，得到的心得count值不是0而是修改后的1，模板会用新值渲染

useState注意事项

1. 只能出现在函数组件中
2. 不能嵌套在if/for/其他函数中（react按照hooks的调用顺序识别每一个hook）

代码测试

//useState实现一个计数器按钮
import { useState } from 'react'

function App() {
  //1. 调用useState添加一个状态变量
  //count状态变量
  //setCount修改状态变量的方法
  const [count, setCount] = useState(0)
  //2.点击事件回调
  const handleClick = () => {
    //作用：1.用传入的新值修改count
    //2.重新使用新的count渲染UI
    setCount(count + 1)
  }
  return (
    <div>
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

2、修改状态的规则

在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新！
以下代码为直接修改

 const handleClick = () => {
    //直接修改无法引发视图更新
    count++
    console.log(count)
  }

3、修改对象状态

规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

直接修改原对象，不引发视图变化
必须要调用set传入新对象用于修改

import { useState } from 'react'

function App() {

  const [form, setForm] = useState({ name: 'jack' })
  const changeForm = () => {
    //错误写法：直接修改
    // form.name = 'john'
    //正确写法：setForm传入一个全新的对象
    setForm({
      ...form,
      name: 'john'
    })

  }
  return (
    <div>
      <button onClick={changeForm}>修改form{form.name}</button>
    </div>
  );
}

点击按钮成功修改！

4、组件的样式处理

组件基础样式方案

1、行内样式（不推荐）

const style = {
  color: 'red',
  fontSize: '50px'
}

function App() {
  return (
    <div>
      {/*行内样式控制 */}
      <span style={style}>this is span</span>
    </div>
  );
}

2、class类名控制
index.css

.foo {
    color: blue;
}

import './index.css'
const style = {
  color: 'red',
  fontSize: '50px'
}

function App() {
  return (
    <div>
      {/*行内样式控制 */}
      <span style={style}>this is span</span>
      {/**通过class类名控制 */}
      <span className="foo">this is class foo</span>
    </div>
  );
}

classnames优化类名控制

classnames是一个简单的JS库，可以非常方便的通过条件动态控制class类名的显示。

受控表单绑定

概念：使用React组件的状态（useState）控制表单的状态

代码测试

//1.声明一个react状态 - useState

//2.核心绑定流程
//通过value属性绑定react状态
//绑定onchange事件，通过参数e拿到输入框的最新值，反向修改到react状态身上去
import { useState } from "react"
function App() {
  const [value, setValue] = useState('')
  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        type="text" />

    </div>
  );
}

hooks当中的State中存储的数据和输入框中的数据保持一致。

React中获取DOM

在React组件中获取/操作DOM，需要使用useRef钩子函数，分为两步：

1.使用useRef创建ref对象，并与JSX绑定

2.在DOM可用时，通过inputRef.current拿到DOM对象

代码测试

//1.useRef生成ref对象，绑定到dom标签身上
//2.dom可用时，ref.current获取dom
//渲染完毕之后dom生成之后才可用
import { useRef } from "react"
function App() {
  const inputRef = useRef(null)
  const showDom = () => {
    console.log(inputRef.current)
  }
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={showDom}>获取dom</button>
    </div>
  );
}

export default App;