button点击后变色_实战项目后对 React Hooks 总结

转载自- 掘金 叫我小明呀-《实战项目后对 React Hooks 总结》

什么是 useState ？

首先 useState 是一个Hook，它允许您将React状态添加到功能组件

useState 是一个方法，它本身是无法存储状态的

其次，他运行在 FunctionalComponent 里面，本身也是无法保存状态的

useState 只接收一个参数 inital value，并看不出有什么特殊的地方。

为什么要 useState?

因为类组件有很多的痛点

1. 很难复用逻辑(只能用HOC，或者render props)，会导致组件树层级很深

2. 会产生巨大的组件(指很多代码必须写在类里面)

3. 类组件很难理解，比如方法需要bind，this指向不明确 比如 经常看到这样的写法。

// 可能是这样
class MyComponent extends React.Component {
    
  constructor() {
    
    // initiallize
    this.handler1 = this.handler1.bind(this)
    this.handler2 = this.handler2.bind(this)
    this.handler3 = this.handler3.bind(this)
    this.handler4 = this.handler4.bind(this)
    this.handler5 = this.handler5.bind(this)
    // ...more
  }
}

// 可能是这样的
export default withStyle(style)(connect(/*something*/)(withRouter(MyComponent)))

怎么用 useState？

开始之前先看一个简单的例子，在没有 Hooks 之前我们是这样来写的。

import React, {Component} from 'react';
class App extends Component {
    
  constructor(props) {
    
    super(props);
    this.state = {
    
      Switch: "打开"
    };
  }
  setSwitch = () => {
    
    this.state.Switch === "打开"
      ? this.setState({ Switch: "关闭" })
      : this.setState({ Switch: "打开" });
  };
  render() {
    
    return (
      <div><p>现在是: {this.state.Switch}状态p><button onClick={this.setSwitch}>Change Me!button>div>
    );
  }
}
export default CommonCollectionPage;

以前函数式组件需要给他自己的状态的时候我们总是不得不把函数式组件变成 Class 类组件，现在有了 React Hooks 我们在也不需要因为一个小状态而将函数式组件变成类组件，上面的这个例子，就可以变成下面的这个方法来表现。

useState 使用案例

function App() {
    
  const [Switch, setSwitch] = useState("打开");
  const newName = () =>
    Switch === "打开" ? setSwitch("关闭") : setSwitch("打开");
  return