ee3022d71c95d6d11b9af141e4cbdbbd.png

本文用来记录和回顾react hook 的使用，因为react的函数式组件式本身是没有状态的和其他类似于class组件的功能，所以一开始，函数组件一般只作为容器组件存在，用来展示父级组件传入的值。而16.8之后出现的 hooks(钩子)，打开了函数式组件的新大门。

useState

作用：用来记录函数式组件的状态

使用方式

import React, { useState } from 'react'

const [n, setN] = React.useState(0)

举个 ，做一个简单的计数器，可以增加和减少

import React, { useState } from 'react‘
import ReactDOM from 'react-dom‘

const App: React.FC = (props: any) => {
  const [n, setN] = useState(0)
  const handlePlus = () => {
    setN(n+1)
  }
  const handleMinus = () => {
    setN(n-1)
  }
  return (
    <div>
      <span>{ n }</span>
      <button onClick={ handlePlus }>+1</button>
      <button onClick={ handleMinus }>-1</button>
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root‘))

此时就能记录该计数器的状态了。

使用注意事项：

  1. 不可以局部更新

如果我们创建的state是一个对象，是否能只更改state中的某个属性。

const [user, setUser] = useState({
  name: 'habitat‘,
  age: 18
})
// 如果我只想修改其中的name属性 
<button onClick={() => { setName('ck') }}>change name </button>
// 预期的话 只会改变其中的name属性，并保留age属性
// 但是实际上 user会直接变成 { name: 'ck‘ }，而不保留age属性
// 正确操作是浅拷贝原来的所有属性，然后用新的属性覆盖老的属性
<button onClick={ () => { setName({ ...user, name: 'ck' )} }>change name </button>

2. setXX(obj)如果重新修改对象，其对象地址一定要改变，如果没有改变react就不能监听到其变化。

探究useState如何实现

第一次尝试

// 尝试改写 React.useState

function myUseState(initialValue) {
  var state = initialValue
  const setState = (newState) => {
    state = newState
    // 更新页面
    render()
  }
  return [state, setState]
}

const render = () => ReactDOM.render(<App />, document.getElementById('root‘))

const App: React.FC = (props: any) => {
  const [n, setN] = myUseState(0)
  const handlePlus = () => {
    setN(n+1)
  }
  const handleMinus = () => {
    setN(n-1)
  }
  return (
    <div>
      <span>{ n }</span>
      <button onClick={ handlePlus }>+1</button>
      <button onClick={ handleMinus }>-1</button>
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root‘))

失败告终，因为每一次重新render的时候，会使用初始值去改变了原有的已经改变了的值，即myUseState会讲state重置。

第二次冲刺:

将state提升为全局变量

let _state

function myUseState(initialValue) {
  _state = _state === undefined ? initialValue : _state;
  const setState = (newState) => {
    _state = newState
    render()
  }
  return [_state, setState];
}

此时利用全局变量，再一次渲染时，因为全局变量已经被修改了，所以重新渲染调用

const [n, setN] = useState(0)的时候，就不会被直接覆盖掉，所以暂时是成功。为什么说是暂时的呢，因为此时只能使用一个useState。如果使用多个useState的时候，则会导致有很多个全局变量，不好管理。

第三次尝试:

将state记录成数组，并使用index去进行创建和修改

let _state = []
let index = 0

function myUseState(initialValue) {
  const currentIndex = index
  index += 1
  _state[currentIndex] = _state[currentIndex] || initialValue
  const setState = newState => {
    _state[currentIndex] = newState
    render
  }
  return [_state[currentIndex], setState]
}

const render = () => {
  // 将index重置为0
  index = 0
  ReactDOM.render(<App />, document.getElementById('root‘))
}

将state记录成一个数组，当进行初始化时，每一次初始化都能记录到对应的下标，而改变时，也都能都对其对应下标进行改变。但是不能够条件性的进行初始化，这样的话会导致对应下标的数据错误。

总结：

每个函数组件都会对应一个React节点

每个节点都保存着state和index

useState会读取state[index]

index由useState的出现的顺序决定

setState会修改state，并触发更新

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生