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 去掉，测试一下效果，只有初次加载的时候，发送了请求，以后不管你输入什么，再也不会发送请求了。