react入门练习1-对react基础元素useState、useEffect、useModel等的

首先

在进行一个项目之前，首先对项目进行切分，思考哪里是整个项目最关键的部分，哪里是需要理清逻辑，整理出一个整体思路。切忌盲目开始写代码，对于即将要写的部分，保证清楚的知道这段代码的目的和实现过程。代码是按照树形结构，一层一层切分的，注重上下逻辑关系，彼此之间的影响关系。每段代码都可以分为四个步骤：1、要达到什么目的2、使用什么方法3、每个方法怎么进行4、方法怎么使用专心进行每一个步骤，不要进行思维跳跃，把核心问题解决以后，根据逻辑进行代码实现，拒绝整个过程都在思考如何解决问题。

主要元素

1、useState：使用函数组件，设置一个state变量，可以用useState更改变量的状态，返回值是state，返回值不会和原本state的值合并，需要setState()去赋值。一般设有一个初始值。这个变量的范围很广：数字、字符串、数组、对象等。2、useEffect：函数组件中没有生命周期，那么可以使用 useEffect 来替代。熟悉 React class 的生命周期函数，可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。（前两个一起——空，第一个——[xxx|空]，第三个——useEffect(() => () => {}）可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可，如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这是一个进行监听的组件函数，针对想要监听的不同目标，进行不同操作。useEffect(() => {},[])方括号中为空时，只针对初始状态做一次监听。当方括号中写入参数时，{}就是对参数的变化进行监听并操作，这样可以减少监听的次数，不需要持续的监听，当有需要的时候再进行监听，减少不必要的工作量。当书写方式变成useEffect(() => () => {})时，是对变化后的结果监听。3、useModel：Model有几个基本的属性：

    namespace：model 的命名空间，只能用字符串。一个大型应用可能包含多个 model，通过namespace区分。
    state：当前 model 状态的初始值，表示当前状态。
    reducers：用于处理同步操作，可以修改 state，由 action 触发。reducer 是一个纯函数，它接受当前的 state 及一个 action 对象。action 对象里面可以包含数据体（payload）作为入参，需要返回一个新的 state。
    effects：用于处理异步操作（例如：与服务端交互）和业务逻辑，也是由 action 触发。但是，它不可以修改 state，要通过触发 action 调用 reducer 实现对 state 的间接操作。
    effects 有三个参数:
        put：用于触发 action 。call：用于调用异步逻辑，支持 promise 。
        select：用于从 state 里获取数据。
        action：是 reducers 及 effects 的触发器，一般是一个对象，形如{ type: ‘add’, payload: todo }，通过 type 属性可以匹配到具体某个 reducer 或者 effect，payload 属性则是数据体，用于传送给 reducer 或 effect。

useXXX通常是react的Hooks，useModel就是快速调用一个model的实例的工具，useState，useEffect, useMemo等也是差不多的东西。4、props：props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点。props在传递数据的过程中，是只读的不能修改。{...props}：展开props属性的一种简洁写法，属于js展开语法。props.children指组件的子元素，对于class 组件，使 this.props.children来获取。state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

针对ant design pro初始化项目的登录页面代码的注释填写的反思和整理

1、const intl = useIntl() 和 const intl = getIntl() 的区别：首先是，前者是在函数组件中使用国际化：const FunctionComponents = (props:any)=>{

const intl = useIntl();
return (
    <>
    {intl.formatMessage({id:'project.package.login.hello'})}
    </>
)
}

后者是ts文件中使用国际化：

export const DataException = {
    hello: getIntl().formatMessage({id:'project.package.login.hello'})}

其次是，useIntl与useState是有相似之处的，保持刷新的状态，可以跟随改变实时刷新，但是getIntl就只能手动刷新才可以。2、const [a, setA] = useState<string>(); setA();不会报错，但是const [b, setB] = useState<string>('b'); setB();会报错，为什么？第一种相当于let a: string|undefind = undefind; 这样当然没问题第二种相当于let a:string = undefind; 所以报错了。这是由于TypeScript自动推断类型的机制引起的。3、async () => {} 的修饰符 async 有什么作用？async是“异步”的简写， async 用于申明一个异步的 function，async函数被调用之后，返回的是一个Promise对象。async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的。async主要来处理异步的操作。执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，后使用第一部返回的数据执行第二步操作的接口调用，达到异步操作。必须保证第一步的执行结束才能执行下一条，否则下一条执行拿不到结果。4、同步异步的区别：同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。异步方法表明，方法一旦开始，立即返回，调用者无需等待其中方法执行完成，就可以继续执行后续方法。使用异步方式，提高响应速度，进而提高程序性能。通常我们写的方法都是同步方法，方法间执行都是串行化的，在一个线程内运行。5、onClick()中使用的是函数，而不是一个结果或者数据。注意函数使用时，是否需要传入参数和输出返回值。6、循环显示数据时，使用map函数，arrays.map((array) => ())输出固定范围：messages.filter()显示的数组是经过处理后的数组，不要把数据的显示和数据处理混在一起。7、undefined：未定义的，变量的初始状态。null：空置，人为置空。8、HTML代码中的{}代表的是JavaScript的代码，让其符合HTML的代码规范。9、!!a可以把a变成一个布尔值，当a不是undefined的时候为true。10、注意数据传递时，传过去的是数值还是地址。11、若s为数组，那么...s代表数组的全部信息，利用setState可以修改数组地址和数组内的属性。例如：messages[currentMessageIndex!] = { ...values, id: messages[currentMessageIndex!].id };12、打开网页，输入数据，保存后，关闭网页，下次打开浏览器的时候，数据依然存在，数据存在哪里了，这个网页还是上次打开的网页么？有两种情况，一种是本地存储(localStorage)，一种是数据库。localStorage的存储时效是持久化的，也就是说如果存储了，不主动清除会一直存在。它的容量一般在2-5M。sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。一般在5M左右。每次都是先创建出一个空间用来存放需要存储的数据，然后把数据放进来，下次需要数据展示的时候，再到这个空间中取到数据。所以说，打开的不再是上次的网页了。13、传值：实际是把实参的值赋值给行参，相当于copy。那么对形参的修改，不会影响实参的值 。传址：实际是传值的一种特殊方式，只是传递的是地址，不是普通的赋值，那么传地址以后，实参和形参都指向同一个对象，因此对形参的修改会影响到实参。14.项目必有的结构是：多语言，封装，权限机制。

练习作业：

目标：显示一个数组，可以增加或删除数组中的元素，点击数组中的每一项的元素标题可以显示详情，针对详情可以编辑元素标题和详情，并保存。主要逻辑：展示数组元素标题、增加数组元素、删除数组元素、预览元素详情、对元素详情进行编辑和保存、退出编辑状态。方法：1、展示：获取数组中的每一个元素，并输出。2、详情预览：根据点击，获取数组的索引值并赋给当前索引值，根据当前索引值，展示对应元素。3、进入编辑状态：设置编辑状态的state为true，根据当前索引值展示对应的输入框的默认内容。4、保存：首先获取到当前输入框的值，随后根据当前索引值判断是否为修改后的新数据，如果索引值不在数组中，那么把获取到的数据添加到数组中，如果索引值在，找到对应元素，更新数组地址，把数据赋值给元素，关闭详情展示。5、取消：设置辑状态的state为false，关闭详情显示。6、关闭：设置编辑状态的state为false，设置当前索引值为undefined，退出详情显示。7、增加：设定增加的索引值为-1，与当前索引值作比较，当与其不符时，把数据加入数组。8、删除：获取数据索引值，使用splice函数，删除当前元素，更新数组地址。使用方法：利用循环展示数组元素，每个元素添加点击事件，点击后展示元素标题和详情，通过编辑和关闭按钮，分别进入编辑状态和退出详情显示，处于编辑状态时，对标题和详情修改并保存，对应的元素标题展示会根据修改发生改变，点击取消会回到预览状态。每个元素后面都有删除按钮，可以删除对应元素。列表显示尾端，有新建按钮，增加新的元素。初始状态： 删除元素： 新建元素： 修改元素：