React Hooks - 学习/实践

1.应用场景

主要用于学习使用react hooks进行前端项目的开发.

2.学习/操作

1.文档

https://www.bilibili.com/video/BV1ev41147DQ?p=1 // 【全网首发:已完结】React Hook+TypeScript『业务开发思路』【业务开发必备】 --- 推荐

https://zh-hans.reactjs.org/docs/hooks-intro.html // 中文档-Hook文档 -- 已通读一遍

http://www.ruanyifeng.com/blog/2019/09/react-hooks.html //React Hooks 入门教程

http://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html // 轻松学会 React 钩子：以 useEffect() 为例

https://segmentfault.com/a/1190000019900931 //Hooks 与 React 生命周期的关系

视频:

https://www.bilibili.com/video/BV1fV411d7Ka?p=114 //2020-web前端-React+ant+ts+node入门到实战的开发（react+ant design+typescript+node）

https://www.bilibili.com/video/BV1ev41147DQ?p=1 // 【全网首发:已完结】React Hook+TypeScript『业务开发思路』【业务开发必备】 --- 推荐

https://www.bilibili.com/video/BV1o5411j797/?spm_id_from=trigger_reload // 【全网首发:更新中】『React Hooks API』手册阅读全套课程【B站专... -- 一起读文档

2. 整理输出

1.关于理论知识，认真查看文档/视频即可.

暂时不打算再抄写一遍~~~

2.运用 react + hooks + ts 编写组件的模板写法 -- 上手部分，而且文档暂未找到的东西

内容简概：

1_搭建项目、组件化结构分析

2_完成Input组件的编写

3_创建数据、完成输入待办项功能

4_替代useState的useReducer的使用技巧

5_完成列表组件的编写

6_状态惰性初始化、与localStorage互通

实践代码：【推荐结合视频讲解，实践/查看代码】

https://github.com/ningxiaofa/react-hooks-todoList

https://www.bilibili.com/video/BV1ev41147DQ?p=1

实践效果如下:

3. 练习小项目

TBD

3. 个人思考

react hooks即JavaScript函数, 基于JavaScript做的封装，暴露出api供开发者使用，

其实框架/库都是这样，基于某些语言， api, 进行更加进一步的封装，转化而成，主要是为了方便开发者使用，快速高效安全地开发项目。

延展：生活中很多事情/事物都是这样，它们的出现都是为了解决某些问题，但是解决问题这个事本身几乎就是没有尽头的，所以才会一直维护，更新.

因为这个世界只有变化才是永恒不变的~~

后续补充

...

老子曰：未始有物【世界就是虚无，一百年前没有我们，一百年后也没有我们，我们终归虚无】

3.问题/补充

1.如何在TS+react+hooks中书写对象方式的state

如下:

src\components\useStateObj.jsx // 这里并不是ts文件类型, 但下面代码可直接用于tsx文件中

import {useState} from "react";

export default function UseStateObj() {

    const [myStateObj, setMyStateObj] = useState(()=>({

        Name: "test",

        Contact: 111111111111,

        Email: "[email protected]",

        Job_title: "test email from phoenix",

        Salary_range: "1000 to 3000",

        Time: "2020-01-01",

      })

    );

    // setMyStateObj({...myStateObj, Name: "william"});

    console.log(myStateObj);

    return (

        <div>

            hello useStateObj!

            <input type="text" onChange={(e) => {

                setMyStateObj({...myStateObj, Name: e.currentTarget.value})

            }}/>

        </div>

    );

}

因为这里直接可推断出数据类型, 可省略, 如果想添加类型约束:

src\app\view\landing\landing.tsx

  const [myStateObj, setMyStateObj] = useState(()=>{

    const name: string = "william"; // Warning: Type string trivially inferred from a string literal, remove type annotation.eslint [即可推断类型, 请移除类型声明 string]

    const new_array: string[] = [];

    return {

      Name: name,

      Contact: 1112123,

      Email: "[email protected]",

      Job_title: "test email from phoenix",

      Salary_range: "1000 to 3000",

      time: "2020-01-01",

      new_array

    }

  }

  );

  setMyStateObj({...myStateObj, Name: "williamning"});