react中的hook

一月 23, 2021

react中的hook

参考链接

`useState`

初始化变量及改变变量的方法

1 2	const [state, setState] = useState(initialState); // 变量改变变量的方法初始化的值

当然这个变量可以是任意的指定形式，初始化的值也可以是一个返回指定内容的方法

import React, {useState, useEffect} from 'react'
export default function App(){
  const [text, setText] = useState(returnState())
  return (
    <>
      {text}
    </>
  )
}
function returnState(){
  return "function"
}

不过这里的改变变量的方法与在class的setState不同，他并不会自动合并

import React, {useState, useEffect} from 'react'
export default function App(){
  const [text, setText] = useState(returnState())
  useEffect(()=>{
    setText({
      name: "Akeno"
    })
  },[])
  return (
    <>
      {JSON.stringify(text)}
    </>
  )
}
function returnState(){
  return {
    Belong: "Harekaze"
  }
}

最后所展示的内容只有{"name":"Akeno"}

`useEffect`

useEffect时用于改变React 组件中的 DOM内容的函数，可以粗暴的理解为
componentDidMount，componentDidUpdate 和 componentWillUnmount

1	useEffect(()=>{},[])

useEffect可以传入两个参数，其中第一个是必须传入的方法

这是一个发布-订阅的例子，具体可以看这篇

https://harekaze-misakiakeno.github.io/2021/01/07/%E5%8F%91%E5%B8%83%E8%AE%A2%E9%98%85%E6%A8%A1%E5%BC%8F/

useEffect会在初始化时触发，如果你没有传入第二个参数，则useEffect会在每次Dom需要改变时都会作用，无论改useEffect内的变量是否发生改变，所以如果要控制useEffect是否触发，则需要传入第二个参数

该函数return的方法这回在该组件即将被卸载时触发，类似于componentWillUnmount

第二个参数会是一个数组，只有该数组内的变量发生变化时，该useEffect才会触发，类似于componentDidUpdate

如果这个是一个空数组，那么这个useEffect只会在初始化时触发一次，类似于componentDidMount

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  },[count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useState, useEffect } from 'react';
import SubPub from '@/utils/SubPub.js';

export default function App() {
  const [price1, setPrice1] = useState(-1);
  const [price2, setPrice2] = useState(-1);

  useEffect(() => {
    // 添加订阅
    let changePrice1 = (value) => {
      console.log('comp2:', value);
      setPrice1(value);
    }
    SubPub.listen('price1', changePrice1);

    let changePrice2 = (value) => {
      console.log('comp2:', value);
      setPrice2(value);
    }
    SubPub.listen('price2', changePrice2);

    // 销毁时取消订阅
    return ()=>{
      SubPub.remove('price1', changePrice1);
      SubPub.remove('price2', changePrice2);
    }
  }, []); // 只触发一次
  return (
    <>
      <h2>This is comp2</h2>
      <h2>{price1}</h2>
      <h2>{price2}</h2>
      <button onClick={() => SubPub.tigger('price1', 2)}>prices1 to 2</button>
    </>
  );
}

`useContext`

这个不讲了，直接上例子

import React, { Component } from 'react';
import Children from './Children';

export const MyContextTest = React.createContext({});

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '我是父组件',
      count: 1
    };
  }

  render() {
    return (
      <div>
        <h2>{this.state.name}</h2>
        <h2>{this.state.count}</h2>
        <button onClick={() => this.setState({count: (this.state.count + 1)})}>change</button>
        <br />
        <MyContextTest.Provider value={this.state}>
          <Children/>
        </MyContextTest.Provider>
      </div>
    );
  }
}

import React, {useState, useEffect, useContext} from 'react'
import {MyContextTest} from './Parent'
export default function App(){
  const value = useContext(MyContextTest);
  const [text, setText] = useState(returnState())
  useEffect(()=>{
    setText({
      name: "Akeno"
    })
  }, [])
  return (
    <>
      {/* {JSON.stringify(text)} */}
      {JSON.stringify(value)}
    </>
  )
}
function returnState(){
  return {
    Belong: "Harekaze"
  }
}

`useReducer`

1	const [state, dispatch] = useReducer(reducer, initialArg, init);

未完。。。

查看评论