react-hook

• 定义变量 useState

import React, {useState} from 'react';
function App() {
  /**
   * count: 状态
   * setCount  修改状态的方法
   */
  const [count, setCount] = useState(10)
  return (
    <div className="App">
      fbd --- {count}
      <button onClick={() => {setCount(count+1)}}>增加</button>
    </div>
  );
}
export default App;

• React.memo

只有改变了才渲染

import React from 'react';
const Child = ({count}) =>{
  console.log('render')
  return <p>{count}</p>
}
export default React.memo(Child)

• 依赖关系 useCallback

import React, {useState, useCallback} from 'react';
const Demo1 = () =>{
  const [age, setAge] = useState(1)
  const [age1, setAge1] = useState(1)
  function handle() {
    setAge(age+1)
  }
  // useCallback 第二个参数 决定第一个函数方法是否可以执行,, 但是第一次会执行一次
  // 如果 数组中的参数 发生变化 则可以执行
  // useCallback 有依赖关系，是否执行
  return (
    <div>
      <p>{age} ll</p>
      <button onClick={handle}>增加</button>
      <hr/>
      <p>{age1} ll</p>
      <button onClick={useCallback(() => {setAge1(age1+1)}, [age])}>增加</button>
    </div>
  )
}
export default Demo1

• useReducer

import React, {useState, useReducer} from 'react';
const initialState = { count: 0 }
function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      return {
        count: state.count+1
      }
    case 'decrement':
      return {
        count: state.count-1
      }
    default:
      throw new Error('错误')
  }
}
function Counter() {
  // const [count, setCount] = useState(0)
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <div>
      count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+++</button>
      <button onClick={() => dispatch({type: 'decrement'})}>---</button>
    </div>
  )
}
export default Counter

• useEffect 生命周期 ， 可以写多个

import React, {useState, useEffect} from 'react';
export default () => {
  const [count, setCount] = useState(0)
  /**
   * 相当于 三个生命周期  didmount   didupdate
   * WillUnMount
   * 
   * 第二个参数 是[]  相当于 didMount 
   * [count] count改变 才会触发
   * 函数内 return  函数  相当于 unmount
   */
  useEffect(() => {
    console.log(count)
    return () => {
      // 组件卸载
    }
  }, [])
  const handle = () => {
    let random = Math.random()
    setCount(random)
  }
  return (
    <div>
      <p>{count}</p>
      <button onClick={handle}>点击</button>
    </div>
  )
}

• Todo

//////list.jsx
import React from 'react';
import Form from './Todo'
import { useState } from 'react';
const TodoList = () => {
  const [todos, setTodos] = useState([])
  function setValue(text) {
    setTodos([text, ...todos])
  }
  function clear() {
    setTodos([])
  }
  return (
    <div>
      <Form onSubmit={setValue}/>
      <div>
        {
          todos.map((el,i) => {
            console.log(el)
            return (
              <div key={i}>
                {el}
              </div>
            )
          })
        }
      </div>
      <button onClick={clear}>clear</button>
    </div>
  )
}
export default TodoList

• form.jsx ```javascript // export default TodoForm import React, {useState} from ‘react’ // 提炼出来 const useInputValue = (initialValue) => { const [value, setValue] = useState(initialValue)

  return { value, onChange: e=>setValue(e.target.value), resetValue: () => setValue(‘’) } }

const TodoForm = ({onSubmit}) => { text是剩余的对象集合 const {resetValue, …text} = useInputValue(‘’)

const onSub =(e) => { e.preventDefault() onSubmit(text.value) //触发父组件的方法 resetValue() } return (

export default TodoForm

---
- useRef()  ,子组件在重渲染时候会重新赋值初始值，每次改变不了。使用useRef会记住每次的值
获取dom  focus
```javascript
let node = useRef(null)
<input type="text"
  value={value}
  className="form-control col-8"
  ref={node}
  onChange={ e => setValue(e.target.value)}
/>
useEffect(() => {
    if (inputActive) {
      node.current.focus()
    }
  }, [inputActive])