Hooks

useState

useState是react自带的一个hook函数，它的作用是用来声明状态变量。

利用运行的顺序

useEffect

在用Class制作组件时，经常会用生命周期函数，来处理一些额外的事情（副作用：和函数业务主逻辑关联不大，特定时间或事件中执行的动作，比如Ajax请求后端数据，添加登录监听和取消登录，手动修改DOM等等）。在React Hooks中也需要这样类似的生命周期函数，比如在每次状态（State）更新时执行，它为我们准备了useEffect

useContext

在用类声明组件时，父子组件的传值是通过组件属性和props进行的，那现在使用方法(Function)来声明组件，已经没有了constructor构造函数也就没有了props的接收，那父子组件的传值就成了一个问题。React Hooks 为我们准备了useContext。这节课就学习一下useContext，它可以帮助我们跨越组件层级直接传递变量，实现共享。需要注意的是useContext和redux的作用是不同的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题，但通过和useReducer的配合使用，可以实现类似Redux的作用。

• Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。

useReducer

useCallback

该回调函数仅在某个依赖项改变时才会更新

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

function changeCount(count){
        console.log('count')
        return count;
}
const actionCount = useMemo(changeCount(count),[count])

useMemo

传入 useMemo 的函数会在渲染期间执行

函数里不要执行与渲染无关的操作

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值

function changeCount(count){
        console.log('count')
        return count;
}
const actionCount = useMemo(()=>changeCount(count),[count])

useRef

自定义函数

官网的示例也很清楚

• 函数中先用useState设置size状态，然后编写一个每次修改状态的方法onResize，
• 使用useCallback，目的是为了缓存方法(useMemo是为了缓存变量)。 然后在第一次进入方法时用useEffect来注册resize监听时间。
• 为了防止一直监听所以在方法移除时，使用return的方式移除监听。最后返回size变量就可以了。

//自定义函数
const useSelfSize = () => {
  const [ size, setSize ] = useState({
    width: window.document.documentElement.clientWidth,
    height: window.document.documentElement.clientHeight
  });

  const handleOnSize = useCallback(() => {
    setSize({
      width: window.document.documentElement.clientWidth,
      height: window.document.documentElement.clientHeight
    })
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleOnSize);
    console.log('add');
    return () => {
      console.log('remove');
      window.removeEventListener('resize', handleOnSize);
    };
  }, [handleOnSize]);

  return size;
}
// 在组件中使用自定义函数
const SelfFunc = () => {
  const size = useSelfSize();
  return (
    <div>
      当前窗口的宽高为:{size.width}x{size.height}
    </div>
  )
}


# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ test ]
  pull_request:
    branches: [ test ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x]

    steps:
    - name: 1. git checkout...
      uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    
    - name: install hexo...
      run: |
        npm install yarn
        yarn
        
    - name: hexo generate public files...
      run: |
        yarn clean
        yarn build  

    - name: hexo deploy ...
      run: |
        mkdir -p ~/.ssh/
        echo "${{ secrets.GITHUB_ACTION }}" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        
        git config --global user.name "XXXXXX"
        git config --global user.email "XXXXXX@XXXXXX.com"
        git config --global core.quotepath false
        
        hexo d

    - name: Setup Git Infomation
      run:
        git config --global user.name zhouqd 
        git config --global user.email zhouqd1997@163.com

    - name: Setup Deploy Private Key
      env:
        HEXO_DEPLOY_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRIVATE_KEY }}
      run: |
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_PRIVATE_KEY" > ~/.ssh/id_rsa 
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts

      env:
        CI: true  
    - run: npm install -g yarn
    - run: yarn
    - run: yarn clean
    - run: yarn build
    - run: yarn deploy

    
    
    # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ test ]
  pull_request:
    branches: [ test ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x]

    steps:
    - name: 1. git checkout...
      uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    
    - name: install hexo...
      run: |
        npm install yarn
        yarn
        
    - name: hexo generate public files...
      run: |
        yarn clean
        yarn build

    - name: Setup Git Infomation
      run:
        git config --global user.name zhouqd 
        git config --global user.email zhouqd1997@163.com
 
    - name: hexo deploy ...
      run: |
        mkdir -p ~/.ssh/
        echo "${{ secrets.GITHUB_ACTION }}" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        
        yarn deploy
    - name: CI ...
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        CI: true  


        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_PRIVATE_KEY" > ~/.ssh/id_rsa 
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts