React18学习-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45864704/article/details/133621713

文章介绍了React中的JSX语法注意事项、渲染列表的方法，包括使用map函数动态生成列表、虚拟DOM的作用以及列表项中的key设定。此外，还提及了如何手动创建React项目，涉及webpack打包工具和react-scripts的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

17、React_JSX的注意事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX的注意</title>
    <script src="./script/react.development.js"></script>
    <script src="./script/react-dom.development.js"></script>
    <script src="./script/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const name = '小时光';
        const div = <div style={{backgroundColor:'red'}}>
            <div id="name1">我是id</div>
            <div className="class1">我是class<br/>{name}</div>
            <div>{}、{undefined}、{false}、{NaN}</div>
        </div>

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(div);
    </script>
</body>
</html>

18、React_渲染列表

其实就是根据原有的数据，生成一个新的数据

06_渲染列表.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_渲染列表</title>
  <script src="./script/react.development.js"></script>
  <script src="./script/react-dom.development.js"></script>
  <script src="./script/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  const name = '孙悟空';
  /**
   *  {}只能用来放js表达式，不能放语句（if for）
   */
  const long = 'en';
  let div;
  if(long === 'en'){
    div = <div>Hello{name}</div>;
  }else if(long === 'cn'){
    div = <div>你好{name}</div>
  }

  const data = ['孙悟空','猪八戒','沙和尚'];
  /*
      <ul>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>沙和尚</li>
        ....
      </ul>

      我们想得到的是[<li>孙悟空</li><li>猪八戒</li><li>沙和尚</li>]
   */

  /*
    两种方法：
   */
  // 方法1、
  const arr = [];
  for(let i = 0;i<data.length;i++){
    arr.push(<li>{data[i]}</li>);
  }

  // 方法2、数组中有个方法，想要对旧数组进行处理，然后得到一个新的数组
  const list = <ul>{data.map(item => <li>{item}</li>)}</ul>
  // 将arr渲染为一个列表在网页中
  // jsx会自动将数组中的元素在页面中显示
  //const list = <ul>{arr}</ul>


  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(arr);

</script>
</body>
</html>

map()函数对一个数组进行处理。在代码中，data是一个数组，map()函数会遍历数组中的每个元素，并且对每个元素执行指定的操作，然后返回一个新的数组，新数组中包含了经过操作后的元素。

19、虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_虚拟DOM</title>
  <script src="./script/react.development.js"></script>
  <script src="./script/react-dom.development.js"></script>
  <script src="./script/babel.min.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div id="root"></div>
<script type="text/babel">

  // 创建一个数据
  const data = ['孙悟空','猪八戒','沙和尚'];

  // 创建列表，只要是在jsx中用表达式就必须加{}
  const arr = <ul>{data.map(item => <li>{item}</li>)}</ul>

  // 获取根元素
  const root = ReactDOM.createRoot(document.getElementById('root'));

  // 渲染元素
  root.render(arr);

  /**
   * 在react中我们操作的元素被称为React元素，并不是真正的原生DOM元素，
   *    React通过虚拟DOM 将React元素和原生DOM，进行映射，虽然操作的React元素，但是这些操作最终都会在真实DOM中体现出来。
   *    虚拟DOM的好处：
   *        1、降低API的复杂度
   *        2、解决兼容问题
   *        3、提升性能（减少DOM的不必要操作）
   *
   *     对于3、提升性能：
   *        React会通过diffing算法，将新的元素和旧的元素进行比较
   *        通过比较找到发生变化的元素，并且只对变化的元素进行修改，没有发生变化吃的不予处理
   *
   *    比较两次数据时，React会先比较父元素，父元素如果不同，直接所有元素全部替换
   *      父元素一样的话，再去逐个比较子元素，直到找到所有发生变化的元素为止
   */

/*// 新数据没有发生任何变化，重新进行渲染
  $('btn').click(function (){
    // 创建一个数据
    const data = ['孙悟空','猪八戒','沙和尚'];
    // 创建列表，只要是在jsx中用表达式就必须加{}
    const arr = <ul>{data.map(item => <li>{item}</li>)}</ul>
    // 获取根元素
    const root = ReactDOM.createRoot(document.getElementById('root'));
    // 渲染元素
    root.render(arr);
  })*/z

  //新数据发生变化
  $('#btn').click(function (){
    // 新数据没有发生任何变化，重新进行渲染
    // 创建一个数据
    const data = ['TOM','猪八戒','沙和尚'];
    // 创建列表，只要是在jsx中用表达式就必须加{}
    const arr = <ul>{data.map(item => <li>{item}</li>)}</ul>
    // 获取根元素
    const root = ReactDOM.createRoot(document.getElementById('root'));
    // 渲染元素
    root.render(arr);
  })
</script>
</body>
</html>

列表中的key

当我们在JSX中显示数组中，数组中没一个元素都需要设置一个唯一key，否则控制台会显示红色警告

在渲染一个列表时，通常会给列表项设置一个唯一的key来避免上述问题

	（这个key在当前列表中唯一即可）
	注意：
		1.开发中一班会采用数据的id作为key
		2.尽量不要使用元素的索引作为key
			索引会跟着元素的顺序改变而改变。唯一的不同就是，控制台的警告没了。
			当元素的顺序不会发生变化时，用索引也没有问题，
			如下：
			const arr = <ul>{data.map((item,index) => <li key={index}>{item}</li>)}</ul>

20、创建React项目（手动）

webpack是打包工具，可以部署到服务器上，还提供了测试服务器

因为手动配置webpack太麻烦了，React提供了react-scripts包

安装nodejs：https://nodejs.org/en

安装完之后，

进入项目所在目录，并执行命令：npm init -y
安装项目依赖：npm install react react-dom react-scripts -S

react基本结构安装完成