React Hooks --- useState 和 useEffect

  React Hooks 都是函数,使用React Hooks,就是调用函数。React Hooks在函数组件中使用,当React渲染函数组件时,组件里的每一行代码就会依次执行,一个一个的Hooks 也就依次调用执行。

  useState(): 接受一个参数,返回了一个数组。

  参数:可以是任意类型。基本类型, 对象,函数都没有问题。作用呢?就是给组件设定一个初始的状态。当组件初次渲染时,它要显示什么,这个参数就是什么。

  返回值:一个数组。数组的第一项是组件的状态,第二项是更新状态的函数,那么在组件中就可以声明一个变量来保存状态,一个变量来保存更改状态的函数,至此函数组件中就有了状态,确切的说是,组件中拥有一个状态变量,你可以随时更改它的值,组件的状态就是某一时刻的变量的值。更新状态的函数就是用来改变这个变量的值的。

  做一个input 输入框组件,初始状态是空字符串,那么传给useState的参数就是""。调用useState() 函数会返回一个数组,那就声明一个变量,进行接收,再从数组中就获取状态和更新函数。

function App() {
    const arr = useState("");
    const state = arr[0];
    const setState = arr[1];
}

  可以看到,useState() hook的使用和普通函数没什么区别,都是传递参数,接收返回值。不过,这么写有点麻烦了,使用数组解构赋值会简洁一些,最好也为状态变量和更新函数起一个有意义的名字

const App= () => {
  const [message, setMessage]= useState('');
}

  有了状态变量之后,就可以在函数组件中使用了,变量的使用没有任何区别,就是在某个地方引用它,获取它的值。比如,在jsx中引用它,组件状态就可以渲染到页面上。

使用create-react-app 创建项目,修改App.js

const App = () => {
  const [message, setMessage]= useState('');

  return (
    <input value={message}></input>
  )
}

  npm start,页面上有了一个空输入框。组件渲染时,执行第一行代码,调用useState(),  返回了初始状态(空字符串),赋值给了message变量。 接着向下执行,返回一个jsx, 它里面使用了message ,赋值给value, 那就读取这时候的message变量的值赋值给value,  message变量的值这时为空字符串,value的值也就为空字符串。 渲染完成后,页面中显示了一个input 输入框,值为空。增加一下交互性,更好地理解useState和组件的渲染过程,给input添加onChange 事件

const App = () => {
  const [message, setMessage]= useState('');

  function handleChange(e) {
    setMessage(e.target.value)
  }
  return (
    <input value={message} onChange={handleChange}></input>
  )
}

  input中输入1,触发了onChange 事件,调用setMessage,  React在内部重新计算了状态值,知道状态改变了,触发了React 的更新机制。因为setMessage()函数也是React暴露给我们的,我们调用函数,把最新值传给了React, React内部就会执行这个函数,计算出新的状态值, 并保存起来。可以这么简单理解一个useState

let _val;
function useState(initState) {
    _val = initState;

    function setState(value) {
        _val = value
    }

    return [_val, setState];
}

  当然React 不会立刻更新组件,而是把它放到更新队列中,和类组件中的setState 一样,React 的渲染是异步的。当真正重新渲染时,React 又会调用App函数组件,还是从上到下,一行一行执行代码。先调用useState(), 不过这时useState 不是返回初始值,函数的参数被忽略了,而是返回触发更新的setMessage中的值e.target.value。因为调用setMessage时,我们向React传递了一个参数,React 在内部完成了状态更新并保存。再次调用useState() 时,它返回的就是更新后的值。把useState返回的值,也就是你在输入框中输入的值1,赋值给了message. 接着向下执行,一个函数的创建,然后是jsx,jsx中的message 取当前值为1,然后赋值给value, 渲染完成,页面上input 中显示1。当你再输入2的时候,更新函数再次调用,React 内部再次执行更新函数,并保存最新状态。App 组件再次被调用,还是先执行useSate() 返回最新的状态12,赋值给message, 然后创建一个handleClick 函数,最后jsx 中message 取12, 组件渲染完成后,页面中的输入框中显示12. 整个过程如下

// 初始渲染。
const message = '';  // useState() 的调用
function handleChange(e) {
  setMessage(e.target.value)
}
return (
  <input value='' onChange={handleChange}></input>
)

// 输入1 更新渲染
const message = 1;  // useState() 的调用
function handleChange(e) {
  setMessage(e.target.value)
}
return (
  <input value=1 onChange={handleChange}></input>
)

// 再次输入2,更新渲染
const message = 12;  // useState() 的调用
function handleChange(e) {
  setMessage(e.target.value)
}
return (
  <input value=12 onChange={handleChange}></input>
)

  组件每一次渲染,都会形成它自己独有的一个版本,在每次渲染中,都拥有着属于它本次渲染的状态和事件处理函数,每一次的渲染都是相互隔离,互不影响的。状态变量,也只是一个普通的变量,甚至在某一次渲染中,可以把它看成一个拥有某个值的常量。它拥用的这个值,正好是react 的useState 提供给我们的。React 负责状态的管理,而我们只是声明变量,使用状态。状态的更新,只不过是组件的重新渲染,React 重新调用了组件函数,重新获取useState 返回的值。useState() 返回的永远都是最新的状态值。

   一定要注意useState的参数,它只有在第一次渲染的时候起作用,给状态变量赋初始值,使组件拥有初始状态。在以后的渲染中,不管是调用更新函数导致的组件渲染,还是父组件渲染导致的它的渲染,参数都不会再使用了,直接被忽略了,组件中的state状态变量,获取的都是最新值。如果你想像下面的代码一样,使用父组件每次传递过来的props 来更新state,

const Message= (props) => {
   const messageState = useState(props.message);
    /* ... */
}

  就会有问题,因为props.message, 只会在第一次渲染中使用,以后组件的更新,它就会被忽略了。useState的参数只在初次渲染的时候使用一次,有可能也是useState 可以接受函数的原因,因为有时候,组件初始状态,是需要计算的,比如 我们从localStorage中去取数据作为初始状态。如果在组件中直接写

const Message= (props) => {

let name = localStorage.getItem('name');
const messageState = useState(name);
/* ... */
}

  那么组件每一次的渲染都会调用getItem, 没有必要,因为我们只想获取初始状态,调用一次就够了。useState如果接受函数就可以解决这个问题,因为它的参数,就是只在第一次渲染时才起作用,对于函数来说,就是在第一次渲染的时候,才会调用函数,以后都不会再调用了。

const Message= (props) => {
const messageState = useState(() => {return localstorage.getItem('name')});
/* ... */
}

   更新函数的参数还可以是函数,函数参数是前一个状态的值。如果你想使用以前的状态生成一个新的状态,最好使用函数作为更新函数的参数。

function handleChange(e){
   const val = e.target.value;
   setMessage(prev => prev + val);
}

  当组件的状态是引用类型,比如数组和对象的时候,情况要稍微复杂一点,首先我们不能只更改这个状态变量的属性值,我们要生成一个新的状态值。

const App = () => {
    const [messageObj, setMessage] = useState({ message: '' }); // 状态是一个对象

    function handleChange(e) {
        messageObj.message = e.target.value; // 只是改变状态的属性
        setMessage(messageObj)
    }
    return (
        <input type="text" value={messageObj.message} onChange={handleChange}/>
    );
};

  无法在input中输入内容。React更新状态时,会使用Object.js() 对新旧状态进行比较,如果它俩相等,就不会重新渲染组件。对象的比较是引用的比较,相同的引用, React 不会重新渲染。所以handleChange 要改成如下

 function handleChange(e) {
        const newMessageObj = { message: e.target.value }; // 重新生成一个对象
        setMessage(newMessageObj);
    }

   这又引出了另外一个问题,react 状态更新使用的是整体替换原则,使用新的状态去替换掉老的状态,而不是setState 的合并原则。如果使用setState,我们只需要setState那些要改变的状态就可以了,React会把这次所做的改变和原来没有做改变的状态进行合并,形成新的整个组件的状态。但这里的setMessage() 不行,

const App = () => {
    const [messageObj, setMessage] = useState({ message: '', id: 1 });

    return (
        <div>
            <input value={messageObj.message}
                onChange={e => {
                    const newMessageObj = { message: e.target.value };
                    setMessage(newMessageObj); 
                }}
            />
            <p>{messageObj.id} : {messageObj.message}</p>
        </div>
    );
};

  在输入框中输入内容的时候,发现id 属性不见了,新的状态去替换掉了整个旧的状态。onChange 要修改如下

onChange = { e => {
    const val = e.target.value;
    setMessage(prevState => {
        return { ...prevState, message: val }
    });
}}

  也正因为如此,React 建议我们把复杂的状态进行拆分,拆成一个一个单一的变量,更新的时候,只更新其中的某个或某些变量。就是使用多个useState(), 生成多个状态变量和更新函数。

const App = () => {
    const [message, setMessage] = useState('');
    const [id, setId] = useState(1);

    return (
        <div>
            <input value={message}
                onChange={e => {
                    setMessage(e.target.value); 
                }}
            />
            <p>{id} : {message}</p>
        </div>
    );
};

  当然,复杂状态变量(比如,Object 对象)可以拆分,主要是对象的各个属性之间的关联不大。如果对象的各个属性关联性特别强,就必须是一个复杂对象的时候,建议使用useReducer.

  useEffect()

  React 的世界里,不是只有状态和改变状态,它还要和外界进行交互,最常见的就是和服务器进行交互,发送ajax请求。这部分代码放到什么地方呢?使用useEffect(). 组件渲染完成后,你想做什么?就把什么放到useEffect()中,因此,useEffect 的第一个参数就是一个回调函数,包含你要做的事情。组件渲染完成了,要请求数据,那就把请求数据内容放到useEffect 的回调函数中。等到组件真正渲染完成后, 回调函数自动调用,数据请求,就发送出去了。使用一下JSONPlaceholder, 给输入框赋值

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

export default function App() {
    const [message, setMessage]= useState('');

    function handleChange(e) {
        setMessage(e.target.value)
    }
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(json => {
                console.log(json);
                setMessage(json.title);
            })
    })

    return <input value={message} onChange={handleChange}></input>
}

  打开控制台,可以发现接口调用了两次,当输入的时候,更是奇怪,直接输入不了,它在不停地调用接口。这时,你可能想到原因了,状态更新会导致组件重新渲染,渲染就会用完成时,完成的那一刹那,useEffect又会重新调用。只要组件渲染完成,不管是初次渲染,还是状态更新导致的重新渲染,useEffect 都会被调用。那不就有问题了吗?请求数据-> 更新状态->重新请求数据->更新状态,死循环了。这就用到了useEffect的第二个参数,一个数组,用来告诉React ,渲染完成后,要不要调用useEffect 中的函数。怎样使用数组进行告知呢?就把useEffect 回调函数中的要用到的外部变量或参数,依次写到数组中。那么React 就知道回调函数的执行是依赖这些变量的,那么它就会时时地监听这些变量的变化,只要有更新,它就会重新调用useEfffect. 这个数组因此也称为依赖数数组,回调函数要再次执行的依赖。现在看一下我们的回调函数fetch,  里面的内容都是写死的,没有任何外部变量依赖,那就写一个空数组。React 看到空数组,也就明白了,useEffect 中的回调函数不依赖任何变量,那它就执行一遍就好了。初次渲染进行执行,以后更新就不用管了。

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(json => {
                console.log(json);
                setMessage(json.title);
            })
    }, []) // 空数组,回调函数没有依赖作何外部的变量

  有的时候,不能只获取1(id)的todos, 用户传递出来的id 是几,就要显示id 是几的 todos.  那么fetch的url 就不是固定的了,而是变化的了。useEffect的回调函数也就有了依赖了,那就是一个id,这个id 是需要外界传递过来的,useEffect 的回调函数中用到了一个外部的变量id,那就需要把id写到依赖数组中。再写一个input 表示用户传递过来的id

export default function App() {
    const [todoTitle, setTodoTitle]= useState('');
    const [id, setId] = useState(1);

    function handleChange(e) {
        setTodoTitle(e.target.value)
    }
    function handleId(e) {
        setId(e.target.value);
    }
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos/' + id)
            .then(response => response.json())
            .then(json => {
                setTodoTitle(json.title);
            })
    }, [id]) // 回调函数依赖了一个外部变量id

    return( 
        <>
            <p>id:  <input value={id} onChange={handleId}></input></p>  
            <p>item title: <input value={todoTitle} onChange={handleChange}></input> </p>
        </>
    )
}

  可以把数组中的id 去掉,测试一下效果,只有初次加载的时候,发送了请求,以后不管你输入什么,再也不会发送请求了。

posted @ 2019-11-28 20:42  SamWeb  阅读(3728)  评论(0编辑  收藏