React学习笔记

一、项目创建
二、React组件定义

最近项目上需要用React，抽了点儿时间做了一些关键点的学习，在这里做一些记录。
技术栈： Vite+React+Typescript

一、项目创建

需要先安装nodejs，官方下载无脑安装，不在傲述，注意装完设置国内镜像源。

官方下载链接: https://nodejs.cn/download/

国内镜像源设置：npm config set registry https://mirrors.tuna.tsinghua.edu.cn/

创建第一个项目。

shell 复制代码

npm create vite@latest [项目名] -- --template react

一切正常的情况下会看到以下画面：

二、React组件定义

1、基本要素

React组件格式有jsx、tsx两种，这取决于你是用的 javascript 还是 typescript。

React的理念"JavaScript All The Things", 组件的所有内容都使用js书写，方便动态计算，给了开发人员更大的控制权力。

React的组件定义是函数式的，跟函数定义的语法很类似，但是也有一些细微的区别，且称之为规范。
参数：必须为解构对象或 interface 类型的抽象结构。
返回值 : 固定格式 return (html片段)
示例:

javascript 复制代码

const Test = ({ name, message}) => {
  return (
    <div>
        <h3>Hey there, {name}!</h3>
        <p>{message}</p>
    </div>
  );
};
export default Test;

或

javascript 复制代码

interface ParamBody {
    name: string,
    message: string
}

const Test = (params: ParamBody ) => {
  return (
    <div>
        <h3>Hey there, {params.name}!</h3>
        <p>{params.message}</p>
    </div>
  );
};
export default Test;

上述两种写法是等价的，更推荐第二种方式，相对比较规范，且在typescript中会有类型提示，相对开发会比较友好。

另外，在Typescript 中也可以像以下这样书写，直接把接口对象定义写在函数中，但是如果参数比较多的情况下会造成阅读困难:

javascript 复制代码

const Test = ({name, message}: {name: string, message: string} ) => {
  return (
    <div>
        <h3>Hey there, {name}!</h3>
        <p>{message}</p>
    </div>
  );
};

完事儿记得 export default [组件名]，以便于其它组件引用。

2、动态数据

响应式数据定义（useState） : 如果需要实现数据的动态绑定（即数据变化自动更新画面），需要使用 useState 函数，可以类比为 vue3中的 ref，但是在react中定义必须使用解构语法，定义 变量与赋值函数，例: const [name, setName] = useState("zhangsan") ，后续如果要修改该数据则需要使用 setName 函数。注意：赋值函数命名规则 set+变量名（首字母大写）。
数据绑定 ：区别于vue3中的双大括号 {``{}}，React中使用单大括号绑定数据 {}。
事件绑定 ：区别Vue3，没有像 v-on、@click等类似的语法糖，但更接近原生dom的 onclick 事件，但是要注意，React中使用驼峰命名，即 onclick → onClick。绑定的事件函数可以直接定义在组件内部，

二、React组件的引用

组件引用：引用没什么好说的，跟vue3差不多，import [组件名] from [组件文件位置]，例 import Test from "./components/Test.tsx";
组件传参：直接属性名=值即可。例: <Test name="zhangsan" message="hello" />

三、React组件通信

在react中的组件通信始终保持一个原则---单向数据流, 即数据总是由父组件流向子组件，官方推荐props属性传参方式进行通信，

如果需要修改数据，子组件可以定义一个回调函数作为参数，子组件在需要的时候自行调用以更新数据。

例：

以下示例中子组件定义了, name, message, update等三个属性，其中update作为一个回调函数被传入，当点击Update按钮时被调用。

javascript 复制代码

const Test = ({ name, message, update }) => {
    const [data, setData] = useState("123");

    const notify = (a, b) => {
        update(a, b);
    }
  return (
    <div>
        <button onClick={() => {notify("456", 123)}}>Update</button>
        <h3>Hey there, {name}!</h3>
        <p>{message}</p>
        <div>{data}</div>
        <StyledContainer>cccc</StyledContainer>
    </div>
  );
};

父组件中将 update 属性传递为一个函数 handleupdate, 即可实现通过子组件按钮调用父组件函数更新父组件数据。

javascript 复制代码

function App() {
  const [name, setName] = useState("zhangsan");
  const [test1, setTest1] = useState("zhangsan");
  const hanleupdate = (a, b) => {
    setTest1(a);
  } 
  return (
    <>
      <Test name={name} message="" update={hanleupdate} />
    </>
  )
}

当然也有 useRef 、forwardRef等方法，官方不推荐，非必要不使用，因为它打破了react的设计原则，除非通过props无法做到，都则不推荐。所以需要的时候再进行学习。

四、React踩坑记录

1、数据赋值后立即使用该数据的值为仍为旧值？

原因：react的优化机制，会在合适的时间统一进行更新，减少浏览器的渲染压力，属于异步调用。
对策：响应式数据不参与计算，只负责展示到画面上。函数定义时可定义为参数，调用时直接传递新值参与计算，而不是等待旧值更新。

2、useEffect的使用场景？

useEffect有点儿类似于 vue中的watch和computed监听某个数据的变化以执行相应的逻辑。

具体用到的时候再进行学习~

以上，就是本次的学习笔记 ~