React Hooks 入门基础（详细使用）

import React, { useState } from "react";
// 函数组件
function Sub () {
  // 参数：状态初始值（传入 0 表示该状态的初始值为 0）
  // 返回值：数组（包含两个值：1、状态值（state）2、修改该状态的函数（setState））
  // 状态值名字可以自定义吗？可以自定义保持语义化
  // 返回值的顺序是否可以替换？不可以，第一个就是数据状态，第二个就是修改数据的函数
  // 组件的更新过程 与 当调用 setCount 的时更新过程：
  // 》首次渲染
  // 首次被渲染的时候，组件内部的代码会执行一次
  // 其中 useState 也会跟着执行，这里重点注意，初始值只在首次渲染时生效
  // 》更新渲染，调用 setCount 整个 app 中代码都会更新
  // 1、app 组件会再次渲染，这个函数会再次执行
  // 2、useState 再次执行，得到新的 count 值不是 0 而是修改之后的 1，模版会用新值渲染
  const [count, setCount] = useState(0)
  // 可以通过输出 count 验证
  console.log(count)
  // useState 可以执行多次
  const [list, setList] = useState([])
  // 点击方法
  function touchButton () {
    // 函数中不能写，会报错的
    // const [flag, setFlag] = useState(true)
    // + 1
    setCount(count + 1)
  }
  return (
    <button onClick={touchButton}>{count}</button>
    // <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}
class App extends React.Component {
  render () {
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  }
}
export default App

import React, { useState } from "react";
function getDefaultValue () {
  // 耗时操作
  for (let index = 0; index < 20000; index++) {
  }
  // 返回结果
  return 10
}
// 函数组件
function Sub (props) {
  const [count, setCount] = useState(() => {
    // return props.count
    return getDefaultValue()
  })
  return (
    <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}
class App extends React.Component {
  render () {
    return (
      <div>
        <Sub count={10}></Sub>
      </div>
    )
  }
}
export default App

import React, { useEffect, useState } from "react";
// 函数组件
function Sub () {
  const [count, setCount] = useState(0)
  // 例如：count 的主作用就是更换按钮中的内容，但是当需要用到它的副作用时，需要在 useEffect 函数中实现它副作用效果
  useEffect(() => {
    console.log('副作用函数调用了')
    // 副作业函数会每次数据变化都执行，默认是全部属性的副作用都会调用该函数，可以指定
    // 例如：当它初始化或变化时设置为网页标题，这就是副作业
    document.title = count
  })
  return (
    // 这是 count 的主作用
    <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}
class App extends React.Component {
  render () {
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  }
}
export default App

useEffect(() => {
    console.log('副作用函数调用了')
    document.title = count
}, [])

// 函数组件
function Sub () {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('dzm')
  // 指定 count/name 会有副作用回调，首次渲染也会回调
  useEffect(() => {
    console.log('副作用函数调用了')
    document.title = count
    // 此时什么时候会执行副作用函数？初始化 + count/name被修改时都会执行
  }, [count, name])
  // 可以写多个副作用函数
  // useEffect(() => {
  //   console.log('count 副作用函数调用了')
  // }, [count])
  // useEffect(() => {
  //   console.log('name 副作用函数调用了')
  // }, [name])
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setName('test')}>{name}</button>
    </>
  )
}

import { useEffect, useState } from "react"
const App = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => {
      // 用来清理副作用的事情
      clearInterval(timer)
    }
  }, [count])
  return (
    <div>{count}</div>
  )
}
export default App