⁴

跟着鱼皮编程导航鱼答答小程序-MBTi项目笔记

高冷氦气猫王

2025-02-08 09:45

阅读602

高冷氦气猫王

2025-02-08 09:45

阅读 602

跟着鱼皮编程导航鱼答答小程序-MBTi项目笔记（2025.02.08）

一、目的

熟悉编程导航笔记流程。
掌握React框架的基本编写风格、语法以及TypeScript的风格和语法。
了解MBTI基本开发流程。
优化自身前端开发流程。

二、完成情况

首页：布局和交互逻辑已完成。
作答页面：布局和交互逻辑已完成，但布局和交互逻辑需再次自行编写，同时需重新思考数据结构设计。

三、问题记录与解决方案

（一）新语法和编写风格适应困难

问题：出现如effect、useState等新语法以及新的编写风格，适应起来效率较低。
原因分析：React的语法和编程模式与以往接触的有所不同，其基于函数式编程和Hook的特性，打破了传统面向对象编程的思维模式，需要重新构建编程思路。
解决方案：采用手抄代码的方式，逐行理解代码逻辑，同时借助AI工具辅助理解。例如，使用ChatGPT，将代码片段输入，并询问其功能、语法使用场景等问题。通过这种方式，加深对新语法和风格的理解。

（二）不熟悉框架和开发语言起步难

问题：面对React框架和TypeScript开发语言，起步存在困难。
解决方案：结合以往在Vue框架开发中的经验，通过类比的方式理解React项目结构。例如，对比Vue的组件化开发与React的组件定义方式，借助熟悉的概念来理解新框架。同时，利用AI工具梳理React和TypeScript的基础知识体系，快速搭建认知框架。

（三）前端开发效率低

问题：在前端开发过程中，整体效率不高。
解决方案：
- 框架搭建：首先搭建页面基本框架布局，确定页面的整体结构和模块划分。
- 样式设计：针对单一模块或单个页面，先结合基本样式规则，然后参考优秀案例，将设计思路输入AI工具，生成美观的样式。例如，使用DALL - E或Midjourney等工具获取设计灵感，再将相关描述转化为CSS样式。
- 交互逻辑：最后完成交互逻辑的编写，确保页面操作的流畅性和用户体验。

（四）布局与交互逻辑、数据的关联问题

问题：前端开发时，布局往往需要配置交互逻辑或数据，处理起来较为棘手。
解决方案：在开发初期，将数据定死作为临时替代方案。在设计总的数据变量时，结合页面已有的数据变量进行设计。例如，对于ARadio组件，该组件需要设计选项数据和当前数据，那么题目数据结构的设计就要参考ARadio中的选项数据，确保数据结构的一致性和关联性，方便后续交互逻辑的实现。

（五）面对新问题的思考方式

问题：遇到不熟悉或新的问题时，缺乏有效的思考方向。
解决方案：面对新语法、新状态等问题，结合过往经验，思考以前类似问题的解决方法。例如，在作答页面涉及题目动态设置和用户选中（上一题、下一题）的数据交互逻辑时，联想Vue3中如何解决类似的状态变更问题，以及如何设置题目并在题目变更时存储题目情况。通过这种方式，将熟悉的知识迁移到新问题上，快速找到解决思路。

（六）Effect和useState语法解析

Effect：是React提供的Hook，用于在函数组件中处理副作用操作。例如，当某个状态发生变更时，Effect内部设置可以自动处理相关变量状态的变化。在Vue中，与之类似的是watch，用于监听数据变化并执行相应操作。
- 示例代码：

▼
jsx
复制代码
import React, { useState, useEffect } from'react';

function Example() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `You clicked ${count} times`;
    }, [count]);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

useState：也是React提供的Hook，用于在函数组件中定义数据状态。它返回一个数组，包含当前状态值和一个用于更新该状态的函数。
- 示例代码：

▼
jsx
复制代码
import React, { useState } from'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

useRef：用于定义引用，例如定义form表单的ref，可以在函数组件中创建可变的引用，并且在组件重新渲染时保持引用不变。
- 示例代码：

▼
jsx
复制代码
import React, { useRef } from'react';

function Form() {
    const inputRef = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(inputRef.current.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" ref={inputRef} />
            <button type="submit">Submit</button>
        </form>
    );
}

四、总结反思

通过本次跟着鱼皮编程导航项目走代码的实践，在前端开发流程方面，我学会了先搭建框架、再设计样式、最后实现交互逻辑的高效开发顺序。在对React框架和TypeScript语法的掌握上，虽然仍存在一些不熟悉的地方，但通过解决各种问题，对它们的理解有了显著提升。在未来的学习和项目实践中，我将继续加强对新语法和框架的练习，注重总结不同框架之间的异同点，进一步优化自己的前端开发能力，提高开发效率。

问答助学