React Hook基本使用踩坑指南

React因为提倡函数式编程，所以提出了Hook思想来增强函数组件的功能，以此来替代基于Class的组件。但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来，还是用基于实例的思想考虑问题，忘记了函数有用完即销毁（特别是纯函数）这样的特点，导致在使用React Hook的时候可能会出一些问题。下面的内容就来记录一下，使用React Hook的新手可能会遇到的一些问题。

Hook使用原则

首先要强调一下Hook的使用原则，可以参考我之前写的文章：如何使用React Hook最后的部分，也可以参考一下官网。遵守Hook使用原则，可以帮助你在使用Hook时避免很多问题。

useState数据只能通过setState来修改

我们举一个代码的例子：

import React, {
    useState } from 'react'

// 子组件
function Child({
    userInfo }) {
   
    // render: 初始化 state
    // re-render: 只恢复初始化的 state 值，不会再重新设置新的值
    //            只能用 setName 修改
    const [ name, setName ] = useState(userInfo.name)

    return <div>
        <p>Child, props name: {
   userInfo.name}</p>
        <p>Child, state name: {
   name}</p>
    </div>
}


function App() {
   
    const [name, setName] =