react useState

useState是react的新东西，这边也提一下其他的新特性：

1. componentWillMount和componentWillReceiveProps替换为static getDerivedStateFromProps。
   getDerivedStateFromProps 会在调用 render 方法之前调用，如果返回 null 则不更新任何内容。
2. 新增错误处理生命周期 static getDerivedStateFromError和componentDidCatch
   我不是啥技术大佬不来掰，建议自己去尝试以下如何使用。

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

import './App.css';

function App() {
  const [count, setCount] = useState(0); // 正常用法， 括号里是初始值
  const [same, setSame] = useState('a'); // 尝试之后不改变的情况

  const [fun, setFun] = useState(() => console.log('我是函数'))

  useEffect(() => {
    console.log(count, same) // 打印以下看看触发
  }, [count, same]) // [] 里写的东西改变才会调用useEffect

  return (
    <div className="App"> 
      <div>{count}</div>
      <div>{same}</div>
      <div>{fun}</div>
      <button onClick={() => setCount(count + 1)}>点我count+1</button>
      <button onClick={() => setSame('b')}>点我改变same</button>
      <button onClick={() => setFun(() => console.log('我是改变后的函数'))}>点我改变same</button>
    </div>
  );
}

export default App;

结果参考：

初始化

初始化发现函数没有运行

第一个按钮尝试
每次都触发了
第二个按钮

只在第一次变化的时候触发，后面没变化就不触发了

第三个按钮
点击后的函数运行了，接下来看看useEffect 对函数的反应：

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

import './App.css';

function App() {
  const [fun, setFun] = useState(() => {console.log('我是函数');return 1})

  useEffect(() => {
    console.log(fun, '------->fun')
  }, [fun])

  return (
    <div className="App"> 
      <div>{fun}</div>
      <button onClick={() => setFun(() => {console.log('我是点击后的函数');return 2})}>点我改变same</button>
    </div>
  );
}

export default App;

函数尝试

当返回值有变化的时候会触发useEffect，无变化的时候会通过函数，但是不会触发useEffect。

当我第一次尝试useState的时候我就在想useState的使用时机是什么，与this.setstate 和 reduers派发的区别和优缺点。
目前来说我觉得useState 比较适用域简单的操作，不要辜负它那么简单的用法。（是不是有点点像vue的双向了？？呵呵，忽略这句话把）

如果 userEffect里使用return 返回一个函数，则函数会在销毁时调用

代码：

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

import './App.css';


function Count(props) {
  const [count, setCount] = useState(0); // 正常用法

  function handleStatusChange(s) {
    console.log(s);
  }
  function subscribeToFriendStatus(id, fun) {
    fun(`to： ${id}`);
  }

  function unsubscribeFromFriendStatus(id, fun) {
    fun(`id: ${id}`);
  }
  useEffect(() => {
   unsubscribeFromFriendStatus (props.id, handleStatusChange);
    return () => {
      subscribeToFriendStatus(props.id, handleStatusChange);
    };
  })

  return (
    <div className="App"> 
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>点我count+1</button>
    </div>
  );
}

function App() {
  const [a, aa] = useState(1);
  return (
    <div className="App"> 
    <p>{a}</p>
    {Count({id: a})}
    <button onClick={() => aa(a + 2)}>+2</button>
    </div>
  );
}

export default App;

```
在点击的时候 subscribeToFriendStatus 会比unsubscribeFromFriendStatus 先console，输出的是销毁的时候的id。
![效果](https://img.haomeiwen.com/i10400777/3fe2c36ad46c5e90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)