dispatch作用 react_React学习之路-react hooks总结(上)

前言

什么是react hooks

首先要清楚react组件分为两种，有状态组件（class组件）和无状态组件（函数组件）

函数组件：

function App(props){
   return (
       <div>hello world</div>
    )
}

类组件

class App extends React.Component {
  render(){
    return (
         <div>hello world</div>
      )
  }
}

这里举两个基本的例子，其中类组件还有很多的内容，包括生命周期，constructor，state等，这里不一一介绍，关于函数组件和类组件，将另外写一篇博客进行介绍

现在要抛出一个问题，类组件中的功能这么多，但是函数组件好像没有这些功能，比如生命周期，函数组件应该如何实现呢

react为函数组件提供了很多hooks api用来实现这些功能

---

目录

• useState
• useReducer
• useContext
• useEffect
• useMemo

---

useState

先翻译，使用状态

一看这个状态，就知道了，useState是用来使用state的hooks api

• 使用方法：

const [n,setN]=React.useState(0)
const [user,setUser]=React.useState({name:'F'})

useState传入一个初始值，返回一个state和一个操作state的函数

应用举例：实现加一操作

const App=()=>{
    const [n,setN]=React.useState(0)
    const onClick=()=>{
        setN(n+1)
    }
    return (
        <div>{n}
        <button onClick={onClick}>+1</button></div>
    )
}

• 注意事项1：

如果state是一个对象，能否部分setState？

不行，setState不会帮我们合并属性

代码示例

function App() {
  const [user,setUser] = useState({name:'Frank', age: 18})
  const onClick = ()=>{
    setUser({
      name: 'Jack'
    })
  }
  return (
    <div className="App">
      <h1>{user.name}</h1>
      <h2>{user.age}</h2>
      <button onClick={onClick}>Click</button>
    </div>
  );
}