react usestate 更新_react useState

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

componentWillMount和componentWillReceiveProps替换为static getDerivedStateFromProps。

getDerivedStateFromProps 会在调用 render 方法之前调用，如果返回 null 则不更新任何内容。

新增错误处理生命周期 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 (

{count}

{same}

{fun}

setCount(count + 1)}>点我count+1

setSame('b')}>点我改变same

setFun(() => console.log('我是改变后的函数'))}>点我改变same

);

}

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 (

{fun}

setFun(() => {console.log('我是点击后的函数');return 2})}>点我改变same

);

}

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 (

{count}

setCount(count + 1)}>点我count+1

);

}

function App() {

const [a, aa] = useState(1);

return (

{a}

{Count({id: a})}

aa(a + 2)}>+2

);

}

export default App;

```

在点击的时候 subscribeToFriendStatus 会比unsubscribeFromFriendStatus 先console，输出的是销毁的时候的id。