React学习

基础学习React还是很简单的，了解React的三个基础Api了解，如何操作ReactDOM和了解什么是react
构建项目流程和一些简单的配置流程：
在我们想创建一个react项目手把手的一步步自己搭建起来熟悉每一个的使用还是很有必要的，如果直接 通过官方的
npm操作：npx create-next-app@latest 我们对于里面的文件每一个的具体作用流程都是一头雾水的！
学习自己如何创建项目文件和解构等种种细节知识：

  1.学习创建项目文件 例子：react_code 这是我们的项目文件夹 如果想在里面安装React的包和库需要先在这个文件创建一个名为public文件夹 然后在里面创建一个名为index.html的文件这个是我们启动的文件为根文件，然后再创建一个名为src的文件夹 创建一个index.js的文件 用来编写代码.
  2.通过终端配置文件   
  	--- 1.进入文件 开始我们创建了一个名为react_code的父文件夹 从终端进文件: cd react_code
   进入后依次下载 ：npm init -y 下载包管理器,package.json 我们可以配置一下，后面启动项目的话就会很方便只需要npm start开启就行了，打开package.json，
   添加"start": "react-scripts start",
  	"build":"react-scripts build" 
（终端快速启动便捷配置）
	2.最后下载我们的react核心库 通过npm 命令：npm add react react-dom react-script -S
	等
	待配置完成 就可以开始编写我们的项目了

项目路径为：

你好React

react是什么？react时一个由脸书(Facebook)团队开发的一个开源框架，也就是现在的Meta公司，不由不说开源是真的伟大啊！！
React使用称为JSX（javasctipt和Xml）的结合语法，是相当的方便快捷的编写极大的加快了我们的开发效率！
如其官方口号所示，React 是一个用于构建用户界面的库。React 不是一个框架——它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。例如，React Native 可用于构建移动应用程序；React 360 可用于构建虚拟现实应用程序……
生态也是非常的好的，未来发展开发不可低估，web开发的快速发展现在也不仅仅只能做web的开发，通过node.js 发展的越来越快，从网页到桌面软件 ，手机App，游戏开发，虚拟现实，WebGpu，Three.js,vue.js React.js Nest.js Next.js 前端后端游戏等等，到处都有js的身影。

js一把梭？为什么要使用React？？

我们通过学习了解原生的js使用万物皆可用js写，可是我们为什么要用框架呢？为什么要学习React呢？！主要的是我们React可以更加的方便快捷的编写程序，jsx语法写的更加的快和高效。

React的虚拟DOM下我们浏览器不需要全部刷新dom，因为React有diff算法，React都是一个个组件函数来完成编写
例我们操作一个Demo:

  <script type="text/babel">
                const arr = ['bear', "Xiong", "Panda", "xiongmao"];
                const div = <ul style>
                        const div = <ul>
                                {arr.map((item, index) => <li key={item}>{item}</li>)}
                        </ul>
                </ul>;
                //给li加了一个key 保留唯一性， 在这个时候diffing算法 就不会从 第一个开始比较了 ，从key值来比较 这样添加一个元素就无需从0-1渲染do
                // 如果不添加键值 =》 就会从第一个标签开始对比： 先去对比 ul 再对比子标签 发现第一个和新数据不一样，下面的所有数据全部渲染！！！！ 影响性能
                // 如果咱们添加了键值 就会通过每一个的唯一性 对比 开始发现 新的键值和旧的只多了一个数据 这样的话 只需要添加 新的数据 
                /*
                        旧数据 
                        ul
                         >li xiong
                         >li panda
                         >li xiongmao

                         新数据 
                         ul 
                         > li ber    ！！！ 
                          >li xiong
                         >li panda
                         >li xiongmao

在React中，`key`属性用于帮助React识别和跟踪组件列表中的每个子元素的身份。当列表中的元素发生变化时，React使用`key`属性来确定哪些元素是新添加的、哪些元素是更新的，以及哪些元素是被删除的。
使用唯一的`key`属性有以下几个好处：
1. **性能优化**：使用唯一的`key`属性可以帮助React更高效地更新组件列表。React使用`key`属性来比较新旧元素，只更新发生变化的部分，而不是重新渲染整个列表。
2. **元素身份识别**：唯一的`key`属性可以帮助React准确地识别每个元素的身份。这对于处理用户交互、动画效果和优化渲染非常重要。
3. **避免警告**：在React中，如果列表中的元素没有提供唯一的`key`属性，会导致警告。通过为每个元素提供唯一的`key`属性，可以避免这些警告，并确保React能够正确地处理列表更新。
总之，使用唯一的`key`属性是React中的最佳实践，它有助于提高性能、准确识别元素身份，并避免潜在的问题。
希望这能帮助您理解为什么在React中使用唯一的`key`属性是重要的。如果您有任何其他问题，请随时提问。
                */
                const root = ReactDOM.createRoot(document.querySelector("#root"));
                root.render(div);

小结：React通过diff算法 对比依次对比新的数据和旧的数据，先从父节点开始对比如果父节点有变化，就重新渲染，如果只添加了一个子节点其他的值没有变化就会添加一个子节点就行了（需要绑定key），不需要再全部修改dom操作

react 三个基础Api

1.创建react的dom =》：React.createElement（‘选择标签名称’,{className:‘类名’,“textValue”}）
2.React获取dom的元素 需要配合ReactDOM这个库来调用dom节点，=》 ReactDOM.creatRoot(document.quertSelector（“#root”）); //获取根节点
3.获取到dom节点and根节点后进行往里面渲染=》root.render（div,root）; //渲染到为id为root的根节点

React 是一个 JavaScript 库，用于构建用户界面。它提供了一种声明式的方式来创建可重用的 UI 组件，并使用虚拟 DOM 技术来高效地更新页面上的内容。

JSX 是一种 JavaScript 的语法扩展，允许您在 JavaScript 代码中编写类似 HTML 的元素。它与 React 密切相关，因为 React 使用 JSX 来定义和创建 UI 组件。通过使用 JSX，您可以在 JavaScript 代码中直接编写组件的结构和样式，使得代码更加清晰和易于理解。

JSX 允许您在 JavaScript 中使用类似 HTML 的标记语法，例如使用 <div>、<button>、<p> 等标签来定义组件的结构。您可以在 JSX 中使用 JavaScript 表达式，以及调用函数和变量。通过将 JSX 代码编译为 JavaScript 代码，React 可以将这些组件渲染到页面上，并将其与底层的 JavaScript 逻辑进行交互。

总结起来，JSX 是一种允许您在 JavaScript 中编写类似 HTML 的元素的语法扩展，而 React 则是一个使用 JSX 来构建用户界面的 JavaScript 库。React 和 JSX 组合在一起，可以帮助您更轻松地创建、组织和维护复杂的用户界面。

使用React编写规范

我们通过编写React快速的开发我们的页面结构，语法：

刚开始我们需要了解和使用一些标签元素

import React from 'react'; 
import ReactDOM from 'react-dom';//导入
const div = React.cloneElement(<div />,{ className: "box" }, "hallo React");//创建一个div,class 类名 ，文本
const Root = ReactDOM.createRoot(document.querySelector("#root")); //ReactDOM 操作dom获取
Root.render(div); //render渲染div到Root根节点

我们先了解和使用基本的每个的作用
我们可以通过jsx语法来快速编写⬇️

import React from 'react'; 
import ReactDOM from 'react-dom';//导入
// const div = React.cloneElement(<div />,{ className: "box" }, "hallo React");//创建一个div,class 类名 ，文本
const div = <main>
        <div className="item" style={{color:'red'}}>
                        hallo 我是JSX语法
        </div>
</main>
const Root = ReactDOM.createRoot(document.querySelector("#root")); //ReactDOM 操作dom获取
Root.render(div); //render渲染div到Root根节点

如果想写入css样式可以通过style={{}}

想使用事件之需要在想添加的标签加上事件类型就行了 记得驼峰大写

Hooks

useState 第一个钩子

这个钩子是我们Reat最常用的一个钩子，它是一个状态变量

const [state,Setstate]=React.useState(1); 
//对象解构出来 方便使用

我们在页面中定义了一个 计数器，需要点击实现加减的效果：
demo 点击加减

//计数
const Jjf = () => { 
  const [number, setNumber] = React.useState(1);
  //解构对象 
  const add = () => {
    setNumber(number + 1);
  };
  //分别写出加和减的两个函数 setNumber就是修改变量值 
  // state实际上就是一个被react管理的变量
  const less = () => {
    setNumber(number - 1);
  };
  return (
    <div>
      <h1>{number}</h1>
      //分别绑定上事件
      <button onClick={add}>+1</button>
      <button onClick={less}>-1</button>
    </div>
  );
};

此时我们setNumber这个里面的值是不可以number++ ｜｜ number–的因为我们操作的是里面的值，React 中的状态更新是通过重新渲染组件来实现的,而不是直接修改状态变量的值。这样可以确保 React 能够跟踪状态的变化,并高效地更新组件的 DOM。

每次修改后会重新调用render 最后通过diff算法 渲染出页面

useRef

React获取dom的方式

//首先创建一个容器
const getButton=React.useRef();
找到想获取的元素标签，然后在括号里面写入Ref（）
const Jjf = () => {
  const getH1 = React.useRef(); //创建钩子
  console.log(getH1.current);
  const getButton = React.useRef(); //获取钩子
  console.log(getButton.current);
  const [number, setNumbe] = React.useState(1);
  const [obj, Setobj] = React.useState({ name: "panda", age: "18" });
  const add = () => {
    setNumbe(number + 1);
    Setobj({ ...obj, name: "xiongmao" });
  };
  const less = () => {
    setNumbe(number - 1);
  };
  return (
    <div>
      <h1 ref={getH1}>{number}--{obj.name}--{obj.age}</h1>
      <button id="Add_button" onClick={add} ref={getButton}>+1</button>
      <button onClick={less}>-1</button>
    </div>
  );
};

useContext

使用这个hooks 分别有以下几步

创建一个容器来存放我们的内容

我们创建好过后就可以直接导入到父组件也就是我们的根组件里面

导入父组件使用UseContext

说白了,父组件里面如果有子组件想过去数据的话,必须要包裹起来,没包裹起来是访问不到这个TextContext的

Provider(供应者)

Provider里面的value才是传递真正的值