react + ts学习笔记

1. React+TS 环境配置

• 安装react的脚手架

npm install -g create-react-app

然后用脚手架创建项目

npx create-react-app react-ts-demo --template typescript

// npx的作用
去`node_modules/.bin`路径检查npx后的命令是否存在，找到之后执行；
找不到，就去环境变量`$PATH`里面，检查npx后的命令是否存在，找到之后执行;
还是找不到，自动下载一个临时的依赖包最新版本在一个临时目录，然后再运行命令，运行完之后删除，不污染全局环境。

主要总结为2点，其一，避免全局安装；其二，可以直接调用安装的模块

2. React Hooks初步了解

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。

常用的钩子有useState, useEffect, useContext, useReducer...

• useState的用法

import React, { useState } from 'react'

const LikeButton: React.FC = () => {
    const [like, setLike] = useState(0)
    const [obj, setObj] = useState({name: "Lancer", age: 16})
    
    const handleClick = () => {
        setLike(like + 1)
            setObj({name: "Ming", age: 26}) //注意这里每个key-value都要列出来
    }
    
    return (
        <button onClick={ handleClick } >
            {likeNum}👍
        </button>
        <p>Name: {obj.name}, Age: {obj.age}</p>
    )
}

3. useEffect容易踩的无限循环的坑

useEffect第二个参数是传的监听的变量，如果这个变量是一个对象的话

import { useEffect } from 'react'

const useTest = () => {
    const obj = {name: 'chen', age: 26}

    useEffect(() => {
        console.log('会无限次调用么？')
    }, obj)
    
    // 调用上面的hook
    return <div>
        <span></span>
    </div>
}
// 如果只是这么写，只会运行一次就结束了。

如果在里面设置一个state, 然后这个state还会在页面渲染呢？


import { useEffect, useState } from 'react'

const useTest = () => {
    const obj = {name: 'chen', age: 26}
    const [num, setNum] = useState(0)
    useEffect(() => {
        console.log('这次会无限次调用么？')
        const newNum = num + 1
        setNum(newNum)
    }, obj)
    
    // 调用上面的hook
    return <div>
        <span>{num}</span>
    </div>
}
// 这次就会无限次调用，因为每次useEffect的函数调用后，num变了，
//页面会从新渲染，又会生成新的obj，然后useEffect又会执行，页面又会重新渲染，如此反复。

所以，得出结论， useEffect的第二个参数，也是绑定的变量，要么是基础数据，如Number, String, Boolean..，要么是 react 的 state都是可以的。尽量不要用普通对象，数组，这种引用类型。

如果需要使用，那么其中依赖的函数就用useCallback包裹, 对象数组就用useRef包裹。 当然，如果是自己写的hooks, 返回出去的时候，也记得包裹一下，以免被别人放到了useEffect或者useMemo里，造成了无限循环的问题。

未完待续...