React18全家桶
邂逅React和React的技术特点
React的介绍
React：用于构建用户界面的JS库
React的官方文档
-
声明式编程：
他允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面
-
组件化开发：将复杂的界面拆分成小的组件
-
多平台适配：
- ReactNative：用于开发移动端跨平台
- ReactVR：用于开发虚拟显示Web应用程序
React 的开发依赖和基本代码编写
开发React必须依赖三个库：
- react：包含react所必须的核心代码
- react-dom：react渲染在不同平台所必需的核心代码
- babel：将jsx转换为React代码的工具
hello world案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>Hello React</title>
</head>
<body>
<div id="root"></div>
<div id="app"></div>
</body>
<script type="text/babel">
//渲染Hello World
//React18之前:ReactDom.render
// ReactDOM.render(hello world
,document.querySelector("#root"));
//react18之后:从一步变成了两步，可以创建多个根
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<h2>hello root</h2>);
const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(<h2>hello app</h2>);
</script>
</html>
实现点击按钮修改文字的案例：
<body>
<div id="app"></div>
</body>
<script type="text/babel">
const app = ReactDOM.createRoot(document.querySelector("#app"));
//1.将文本定义成变量
let message = "Hello World"
//2.监听按钮的点击
function btnClick() {
console.log(1);
//1.1修改数据
message = "hello React";
//1.2重新渲染数据
rootRender();
}
//封装渲染函数
function rootRender(){
app.render((
<div>
<h2>{message}</h2>
<button onClick={btnClick}>修改文本</button>
</div>
));
}
//初始渲染一次
rootRender();
</script>
hello world-组件化开发
hello world案例可以看成一个整体，既然是整体，那么就可以将其封装成一个组件
- root.render的参数是一个html元素或者一个组件
- 我们可以将helloworld案例封装成一个组件，传入到ReactDOM.render中
如何封装一个组件？（类组件）
- 定义一个类（类名大写，否则会被认为是html元素），继承React.Component
- 实现当前组件的render函数，就是之后渲染的内容
组件化-数据依赖
组件中的数据分为两类:
- 参与界面更新的数据：我们可以称为参与数据流，这个数据是定义在当前对象的state中的
- 我们可以通过在构造函数中this.state=｛定义的数据｝
- 当我们的数据发生变化时，我们可以调用this.setState来更新数据，并且通知React进行update操作；（在进行update操作时，就会重新调用render函数，使用最新的数据，来渲染界面）
组件化-事件绑定
- 组件化问题二：事件绑定中的this
- 在类中直接定义一个函数，并且将这个函数绑定到元素的onClick事件上，那么这个函数的this指向谁？
- 默认情况下是undefined
- 因为在正常的DOM操作中，监听点击，监听函数中的this是节点对象（比如button对象）
- 因为react并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，他的本质是react的Element对象
- 在这里发生监听时，react在执行函数时并没有绑定this，默认情况下就是一个undefined（严格模式下）
btnClick方法中的this将指向undefined或者是全局window对象，取决于是否在严格模式下。
将helloworld案例组件化重构
<body>
<div id="root"></div>
</body>
<script type="text/babel">
class App extends React.Component {
//组件数据
constructor() {
super();
this.state = {
message: "hello world"
}
//对需要绑定的方法，提前绑定好this,写在这里，只需绑定一次
this.btnClick = this.btnClick.bind(this)
}
//组件方法(实例方法)
btnClick() {
//如果button绑定方法时没有改变this的指向，严格模式下会指向undefinde。
//因为事件绑定过程中会执行类似 const click = this.btnClick;click(),这在babel的严格模式下会指向undefined
//所以我们需要将this指向数据所在的实例对象
console.log(this);
//父类的方法，内部完成了两件事情：1.将state中的message值修改掉，2.重新执行render方法
this.setState({
message: "hello react"
})
}
//渲染内容render方法
render() {
console.log("render:", this)//this指向当前组件实例
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClick}>修改文本</button>
</div>
)
}
}
//this指向的问题
// const app = new App()
// const foo = app.btnClick()
// foo();//默认绑定 => window => 严格模式下 => undefined
// function bar() {
// console.log("bar:", this);默认绑定 => window => 严格模式下 => undefined
// }
// bar();
const root = ReactDOM.createRoot(document.querySelector("#root"));
//App可以作为一个根组件
root.render(<App />)
</script>
电影列表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
//1创建root
const root = ReactDOM.createRoot(document.querySelector("#root"))
//创建组件
class App extends React.Component {
constructor() {
super()
this.state = {
movies: ["我爱你", "消失的她", "封神榜"]
}
}
render() {
//1.使用for循环
// const lis = []
// for(let i = 0;i
// const movie = this.state.movies[i];
// const li = {movie}
// lis.push(li);
// }
//2.使用map
const lis = this.state.movies.map(item=><li>{item}</li>)
return (
<div>
<h2>电影列表</h2>
<ul>
{lis}
</ul>
</div>
)
}
}
//写成 倒计时案例
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root = ReactDOM.createRoot(document.querySelector("#root"))
class App extends React.Component {
constructor() {
super();
this.state = {
counter: 100
}
this.increment = this.increment.bind(this)
this.decrement = this.decrement.bind(this)
}
increment() {
this.setState({
counter: this.state.counter + 1
})
}
decrement() {
this.setState({
counter: this.state.counter - 1
})
}
render() {
const { counter } = this.state
return (
<div>
<h2>{counter}</h2>
<button onClick={this.increment}>+1</button>
<button onClick={this.decrement}>-1</button>
</div>
)
}
}
root.render(<App />)
</script>
VSCode代码片段
具体步骤：
- 复制自己需要生成代码片段的代码
- https://snippet-generator.app/在该网站生成代码片段
- 在VSCode中配置代码片段
React基础-JSX语法
认识JSX语法
const element = hello world
这就是一段jsx语法（就是把html代码写到js当中），在js中会报错，因为js中不能直接给一个变量赋值html
JSX是什么？
- jSX是一种javaScript的语法扩展，也称为JavaScript XML
- 用于描述我们的UI界面，可以和JS融合使用
为什么React选择了JSX
- React认为渲染逻辑（js）本质上与其他UI逻辑存在内在耦合
- 比如UI需要绑定事件；
- 比如UI需要展示数据状态
- 比如在某些状态发生改变时，又需要改变UI
- 因为html和JS这些逻辑密不可分，所以React干脆将他们组合到一起(html in js =>JSX)，形成组件
JSX的基本使用
JSX的书写规范
- JSX结构中只能有一个根元素
- jsx结构通常就包裹一个（），将整个jsx当作一个整体，实现换行
- 可以是单标签或者双标签，单标签必须以**/>结尾**
JSX的注释编写
render(){
const { message } = this.state
return(
{/* JSX的注释写法 */}
)
}
JSX插入内容作为子元素
class App extends React.Component {
constructor() {
super();
this.state = {
a:10,
b:"string",
c:["1","2","3"],
d:undefined,
e:null,
f:true,
friend:{
name:"hhh"
}
}
}
render() {
const {a,b,c,d,e,f,friend} = this.state
return (
{/*number,string,array类型可以直接显示*/}
{a}
{b}
{c}
{/*undefined,null,boolean会被忽略，不显示，需要将其转换为字符串*/}
{d}
{e}
{f}
{/*将undefined，null，boolean转换为字符串*/}
{String(d)}
{e+""}
{f.toString()}
{/*object类型不能作为子元素显示 会报错*/}
{friend}
)
}
}
JSX中嵌入不同的表达式
- 运算表达式
- 三元运算符
- 执行一个函数
在执行map函数展示列表的时候，当我们没有向列表添加key时，会报错
- 这个警告是告诉我们需要在列表展示的jsx中添加一个key
- key主要的作用是为了提高diff算法时的效率
JSX的事件绑定
- 如果原生DOM有一个监听事件，我们可以如何操作呢？
- 获取DOM原生，添加监听事件
- 在HTML原生中，直接绑定onclick
- 在React中实现事件监听
- React事件命名采用小驼峰式，而不是纯小写
- 我们通过**｛｝传入一个事件处理函数**，这个函数会在事件发生时被执行
this的绑定问题
- this的四种绑定规则
- 默认绑定：独立执行foo() => 非严格模式下指向window，严格模式下undefined
- 隐式绑定：被一个对象执行obj.foo() => 指向obj
- 显式绑定：call//apply//bind => foo.call(“aaa”) => 指向aaa
- new绑定：new Foo() => 创建一个新对象，并且赋值给this
- 在react中，事件执行之后，我们可能需要获取当前类的对象中的相关属性，这个时候需要用到this
- 我们直接打印这个this，会发现它是一个undefined
- 为什么是undefined呢？
- 原因是btnClick函数并不是我们主动调用的，而是当button发生改变时，react内部调用了btnClick函数
- 而它内部调用时，并不知道要如何绑定正确的this
- 如何解决this的问题？
- bind给btnClick显示绑定this
- 使用ES6 class fields语法
- 事件监听时传入箭头函数
案例：
btn1Click() {
console.log("btn1Click", this);
this.setState({
counter: 1
})
}
render() {
const { message, counter } = this.state
return (
{counter}
{/*1. this绑定方式一：bind绑定*/}
)
}
-
onClick={this.btn1Click}这里通过this.的方法调用，为什么不是隐式绑定?
-
因为这里并没有对btn1Click进行调用，只是引用
-
内部执行类似于:
React.createElement(“button”,{onClick:this.btn1Click})
const click = config.onClick
click()* 所以我们需要通过bind改变this指向 -
-
我们模拟一下内部调用：
-
//模拟react中事件监听的执行 const app = { foo: function () { console.log("foo:", this) } } const config = { element: "button", onClick: app.foo.bind(app) } const click = config.onClick click();
-
-
-
三种this绑定方式的实例
-
class App extends React.Component { constructor() { super(); this.state = { message: "hello world", counter: 100 } } btn1Click() { console.log("btn1Click", this); this.setState({ counter: 1 }) } btn2Click = () => { console.log("btn2Click", this); this.setState({ counter: 2 }) } btn3Click() { console.log("btn3Click", this); this.setState({ counter: 3 }) } render() { const { message, counter } = this.state return () } }{counter}
{/*1. this绑定方式一：bind绑定*/} {/*2. this绑定方式二：ES6 class fields*/} {/*3. this绑定方式三：直接传入箭头函数 直接传入一个箭头函数，箭头函数的this指向执行上下文， 点击按钮时执行箭头函数，再用箭头函数调用btn3Click，隐式绑定this指向*/}
-
传递event参数和额外参数
总而言之，多使用箭头函数
电影列表案例