react Hook

Posted 2020-12-18 nianzhilian

概念：在不使用class组件的情况下，允许你使用state和react的其他特性

产生背景：在组件之间公用相同的逻辑往往很难，在以前的解决方案是：高阶组件和render props  但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。

你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

Hooks不要在循环，条件或嵌套函数中以及class组件中调用 Hook，只在最顶层使用hook

不要在普通的函数中调用hook，只在react函数中调用hook

import React, { Component,useState } from ‘react‘;
import ReactDOM from ‘react-dom‘
import PropTypes from ‘prop-types‘;

function Example(){
    // count变量的值是useState返回的第一个值  setCount是useState返回的第二个值
　　//数组解构
    const [count,setCount] = useState(0)
    return (
        <div>
            <p>you click {count} times</p>
            <button onClick={()=>setCount(count+1)}>点击我</button>
        </div>
    )
}

ReactDOM.render(<Example />,document.getElementById(‘root‘))

 

import React, { Component,useState,useEffect} from ‘react‘;
import ReactDOM from ‘react-dom‘
import PropTypes from ‘prop-types‘;

function Example(){
    const [count,setCount] = useState(0)
    // 每次渲染完毕后都会执行useEffect
    //类似于class组件的  componentDidMount和componentDidUpdate
　　//会在执行当前 effect 之前对上一个 effect 进行清除

    useEffect(()=>{
        console.log(123)
        document.title = `You clicked ${count} times`
　　　　//如果需要清除副作用 则需要返回一个函数来清除副作用，如果不需要清除副作用 则不需要返回一个函数
    },[])  //如果第二个参数是一个空数组 useEffect在挂载和卸载的时候只会执行一次
//React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，因此会使得额外操作很方便。
    return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count+1)}>
            Click me
          </button>
        </div>
    )
}

ReactDOM.render(<Example />,document.getElementById(‘root‘))//

import React, { Component,useState,useEffect} from ‘react‘;
import ReactDOM from ‘react-dom‘
import PropTypes from ‘prop-types‘;

function Counter({initialCount}) {
    const [count, setCount] = useState(initialCount);
    return (
      <React.Fragment>
            Count: {count}
            <button onClick={() => setCount(initialCount)}>Reset</button>
            <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
            <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
            {/*  */}
        </React.Fragment>
    );
  }
  //上面更新状态类似调用下面的 this.setState
  class App extends React.Component{
      constructor(props){
        this.setState((state)=>({

        }))
      }
  }

ReactDOM.render(<Counter initialCount={0} />,document.getElementById(‘root‘))

 如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。

useEffect的执行时机：等到浏览器完成布局和绘制之后，传给 useEffect 的函数会延迟调用

默认情况下，effect 会在每轮组件渲染完成后执行。这样的话，一旦 effect 的依赖发生变化，它就会被重新创建。销毁前一个effect  创建一个新的effect 

然而，在某些场景下这么做可能会矫枉过正。比如，在上一章节的订阅示例中，我们不需要在每次组件更新时都创建新的订阅，而是仅需要在 source prop 改变时重新创建。

要实现这一点，可以给 useEffect 传递第二个参数，它是 effect 所依赖的值数组。

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);