React笔记

最新推荐文章于 2024-07-26 00:11:05 发布

风雅-

最新推荐文章于 2024-07-26 00:11:05 发布

阅读量258

点赞数 2

CC 4.0 BY-SA版权

文章标签： React笔记个人心得

本文链接：https://blog.youkuaiyun.com/qq_42312930/article/details/84799444

本文详细介绍了如何创建一个基于webpack4的React项目，包括设置基本项目结构、安装React和ReactDOM、理解JSX语法以及两种创建React组件的方法。通过实例展示了如何在JSX中混合编写JS表达式、添加注释、绑定类名等，并探讨了class关键字在ES6中的应用。

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

1. 创建基本的webpack4.X项目

运行 npm init y快速初始化项目
在项目根目录下创建src源代码目录和dist产品目录
在src目录下创建index.html
使用npm安装webpack，运行npm i webpack webpack-cli -D
- 全局运行npm i cnpm -g安装cnpm
注意：webpack4.X提供了预定大于配置的概念；目的是为了减少配置
- 默认约定了
  - 打包入口文件是src->index.js
  - 打包输出文件dist->main.js
  - 4.X中新增了mode选项，可选值为development(开发环境打包后不压缩)和`production(生产环境打包后会压缩)

2. 在项目中使用react

运行npm i react react-dom -S安装包
- react：创建组件、虚拟DOM元素、生命周期
- react-dom：把创建好的组件和虚拟DOM放到页面展示

在index.html页面中，创建容器

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Index</title>
</head>
<body>
  <!-- 容器，将来使用react创建的虚拟DOM都会在这里展示 -->
  <div id="app"></div>
</body>
</html>

导入包：

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

创建虚拟DOM元素

// 参数一： 创建元素的类型，字符串，标识元素名称
// 参数二： 是一个对象或null， 表示当前这个DOM元素的属性
// 参数三： 子节点(包括其他虚拟DOM或者文本子节点)
// 参数n：  其他子节点
const myh1=React.createElement('h1', null, '这是一个h1')
const mydiv=React.createElement('div', null, '这是一个div',myh1)

渲染

// 3. 使用ReactDOM把虚拟DOM渲染到页面
// 参数一： 要渲染的那个虚拟DOM元素
// 参数二： 指定页面上的容器
ReactDOM.render(mydiv, document.getElementById('app'))

3. JSX语法

什么是JSX语法：就是符合XML规范的js语法。(语法格式来说，要比HTML严谨很多)

如何启用JSX语法
- 安装babel插件
  - 运行 npm i babel-core babel-loader babel-plugin-transform-runtime -D
  - 运行 npm i babel-preset-env babel-preset-stage-0 -D
- 安装能够识别转化jsx语法的包 babel-preset-react -D
  - 运行 npm i babel-preset-react -D
- 添加 .babel配置文件
```
{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}
```
- 添加babel-loader配置项
```
module: { //所有第三方模块得到匹配规则
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
    ]
  }
```
JSX语法的本质 ：并不是直接把jsx渲染到页面上，而是先内部转化成了createElement形式，在渲染的

在JSX中混和写入js表达式 ：在JSX语法中，要把js代码写到{ }中

渲染数字

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

const a= 10;

ReactDOM.render(<div>{a + 2}</div>, document.getElementById('app'))

渲染字符串

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

let str = '你好,中国';

ReactDOM.render(<div>{str}</div>, document.getElementById('app'))

渲染布尔值

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

const flag = true;

ReactDOM.render(<div>

	{flag ? '结果为真' : '结果为假'}
	
</div>, document.getElementById('app'))

为属性绑定值

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

const title = 999;

ReactDOM.render(<div>
 
  <p title={title}>这是一个p</p>
  
</div>, document.getElementById('app'))

渲染jsx元素

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

const h1 = <h1>这是一个h1</h1>

ReactDOM.render(<div> {h1} </div>, document.getElementById('app'))

渲染jsx元素数组

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

const array = [ <h2>这是一个h2</h2>, <h1>这是一个h1</h1>];

ReactDOM.render(<div> {array} </div>, document.getElementById('app'))

将普通字符数组转化为jsx数组并渲染到页面上【两种方案】

方案一:

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

const arrStr = ['大雄', '叮当猫', '静香', '小丸子'];

// 定义一个空数组，将来用来存放名称标签
const nameArr = [];
arrStr.forEach(item => {
  const temp = <h3>{item}</h3>;
  nameArr.push(temp);
})

ReactDOM.render(<div> {nameArr} </div>, document.getElementById('app'))

方案二：

// 1. 这两个导入的时候，接受的成员名必须这么写
import React from 'react' // 创建组件、虚拟DOM元素、生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面展示

const arrStr = ['大雄', '叮当猫', '静香', '小丸子'];

ReactDOM.render(<div>
  {arrStr.map(item => {
     // 数组中的map方法一定要写return
    return <h3>{item}</h3>
  })}
</div>, document.getElementById('app'))

在jsx中写注释：推荐使用 { /* 这是注释 */ }
为jsx的元素添加class类名 ：需要使用 className来代替 class ; htmlFor 来代替label的 for属性
在为jsx创建DOM的时候，所有节点，必须有唯一根元素进行包裹
在jsx语法中，标签必须成对出现，如果是单标签，则必须自闭和！

在编译引擎，在编译jsx代码的时候，如果遇到了<那么就把他当做HTML去编译，如果遇到了 {}就把花括号内部的代码当做普通的js代码去编译

4. React中创建组件

第1种-创建组件的方式

使用构造函数来创建组件 ，如果需要接收外界传递的数据，需要在构造函数的参数列表中使用 props 来接收；必须向外 return 一个合法的 jsx 创建的虚拟 DOM

创建组件

function Hello () {
  // return null
  return <div> Hello 组件 </div>
}

为组件传递数据

// 使用组件为组件传递props数据
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

// 在构造函数中使用props形参，接收外界传递过来的数据
function Hello (props) {
  console.log(props)
  // 结论：不论是Vue 还是React，组件中的props永远是只读的，不能重新赋值

  return <div>这是Hello组件---{props.name}---{props.age}---{props.gender}</div>
}

父组件向子组件传递数据
使用{…obj} 属性扩散传值
将组件封装到单独文件当中
注意：组件名称首字母必须是大写

如何省略.jsx的后缀名

// 在webpack.config.js, 中新增一个如下节点
resolve: {
    extensions: ['.js', '.jsx', '.json'] //表示这几个文件的后缀可以省略
  }

再导入组件的时候，配置和使用@路径符号

第2种 - 创建组件的方式##

使用class类关键字来创建组件

了解ES6中 class关键字的使用##

class 中constructor的基本使用
实例属性和实例方法
静态属性和静态方法
使用extends关键字实现继承

基于class关键字创建组件##

最基本的组件结构：