react-hook

有状态组件：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
You clicked {this.state.count} times
         this.setState({ count: this.state.count + 1 })}>
          Click me
        
      
    );
  }
}

使用hooks后：

import { useState } from 'react';

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

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

代码量减少了很多

为什么使用Hooks

• 组件复用是状态管理难以维护
• 纯函数
• 副作用Effects
• State Hooks

引用掘金社区Hooks