这是我参与【第五届青训营】笔记创作活动的第4天
一、初识JSX
1.1.JSX是什么
- JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法；
- 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；
1.2.JSX的书写规范
- JSX的顶层只能有一个根元素
- jsx的外层长通厂包裹一个小括号
1.3.JSX的使用
- jsx嵌入变量作为子元素
-
- 变量为Number、String、Array类型，直接显示
- 变量为null、undefined、Boolean类型，内容为空
-
-
- 如果想要显示，可以通过toString方法、拼接空字符串、String()等方法装成字符串
-
-
- Object类型不能作为子元素
- jsx嵌入表达式
-
- 运算表达式
- 三元运算符
- 执行一个函数
- jsx绑定属性
-
- 元素 title属性 img src属性 a href属性 等
<script type="text/babel">
// 1.定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
message: "Hello World",
counter: 100,
names: [1, 2, 3],
a: undefined,
b: null,
c: true,
friend: { name: "kk" },
movies: ["大话西游", "red", "阿凡达"],
age: 9,
};
}
render() {
// 1.插入标识符
const { message, names, counter } = this.state;
const { a, b, c } = this.state;
const { friend } = this.state;
const { age } = this.state;
return (
<div>
{/*1.String/Number/Array直接显示出来*/}
<h2>{message}</h2>
<h2>{counter}</h2>
<h2>{names}</h2>
{/*undefined/null/Boolean不可以*/}
<h2>{String(a)}</h2>
<h2>{b + ""}</h2>
<h2>{c.toString()}</h2>
{/*3.Object不能作为子元素进行显示*/}
<h2>{friend.name}</h2>
<h2>{Object.keys(friend)[0]}</h2>
{/*4.可以插入对应的表达式*/}
<h2>{10 + 20}</h2>
{/*5.可以插入三元表达式*/}
<h2>{age >= 10 ? "小孩子" : "大孩子"}</h2>
{/*6.可以调用方法获取结果*/}
<ul>
{this.state.movies.map((item) => (
<li>{item}</li>
))}
</ul>
<ul>{this.getItems()}</ul>
</div>
);
}
getItems() {
let arr = this.state.movies.map((item) => <li>{item}</li>);
return arr;
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
</script>
二、React事件绑定
2.1.基本绑定
- 获取DOM原生，添加监听事件
- 在HTMl原生中，直接绑定onClick
注意：
- 命名采用小驼峰式
- 通过{}传入一个事件处理函数
2.2.this绑定
- bind显示绑定：onClick={this.btn.bind(this)}
- es6 class fields语法: onClick={this.btn} btn =() =>{}
- 事件监听时传入箭头函数: onClick={() => this.btn()}
- 注意：默认绑定 *onClick={this.btn} *在内部是独立函数调用，所以this为undefined
2.3.事件参数传递
- 获取event
-
- 传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数
- 额外参数传递
btn(event) {
console.log(event)
}
onClick={(event) => this.btn(event}
btn(event,age) {
console(event, age)
}
onClick={(event) => this.btn(event,18}
案例
点击某一个列表元素变色
传入index
排他思想
<script type="text/babel">
// 1.定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
message: "Hello World",
colors: ["red", "pink", "skyblue", "green"],
currentIndex: 0,
};
}
itemClick(index) {
this.setState({ currentIndex: index });
}
render() {
const { colors, currentIndex, message } = this.state;
// 排他思想
return (
<div>
<ul>
{colors.map((item, index) => {
return (
<li
className={currentIndex === index ? "active" : ""}
key={item}
onClick={() => this.itemClick(index)}
>
{item}
</li>
);
})}
</ul>
</div>
);
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
</script>
三、React条件渲染
- 条件判断
- 三元运算符
- 与运算符&&
-
- 如果条件成立，渲染某一个组件，不成立，什么内容也不渲染
- 类似于vue中v-show的效果
-
- 控制display为none
<script type="text/babel">
// 1.定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
message: "Hello World",
isReady: false,
friend: undefined,
};
}
render() {
const { isReady, friend, message } = this.state;
// if
let ele = null;
if (isReady) {
ele = <h2>start</h2>;
} else {
ele = <h2>stop</h2>;
}
return (
<div>
{/*1/根据条件给变量复制不同的内容*/}
<div>{ele}</div>
{/*2.三元运算符*/}
<div>{isReady ? <h2>start</h2> : <h2>end</h2>}</div>
{/*3.&&逻辑与运算, 当某一个值，有可能为undefined时，使用&&进行条件判断*/}
<div>
{friend && <div>{friend.name + " " + friend.desc}</div>}
</div>
</div>
);
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
</script>
四、React列表渲染
- map高阶函数（遍历）
- filter函数（过滤）
- slice函数（截取）
注意
列表展示的jsx中需要添加key
- 为了提高提高diff算法时的效率
<script type="text/babel">
// 1.定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
message: "Hello World",
students: [
{ id: 111, name: "kk", score: 199 },
{ id: 112, name: "zz", score: 98 },
{ id: 113, name: "ss", score: 199 },
{ id: 114, name: "jj", score: 188 },
],
};
}
render() {
const { students, message } = this.state;
// 大于100
const show = students.filter((item) => {
return item.score > 100;
});
const slice = show.slice(0, 2);
return (
<div>
<div>
{students
.filter((item) => item.score > 100)
.slice(0, 2)
.map((item) => {
return (
<div className="item" key={item.id}>
<h2>学号：{item.id}</h2>
<h2>姓名：{item.name}</h2>
</div>
);
})}
</div>
</div>
);
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
</script>
五、JSX的代码是如何被编译为React代码的，本质是进行什么操作
- jsx是通过bbel工具转换编译成React代码的
- 本质
- jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖
- 所有的jsx最终都会被转换成React.createElement的函数调用
六. 什么是虚拟DOM？虚拟DOM在React中起到什么作用？
6.1.什么是虚拟DOM？
- Virtual DOM 是一种编程概念，UI以一种理想化或者说虚拟化的方式保存在内存中
- Virtual DOM 本质上是 JavaScript 对象，是真实 DOM 的描述，⽤⼀个 JS 对象来描述⼀个 DOM 节点
- 我们知道jsx转成React代码的本质是 - 转换成React.createElement的函数调用
- 通过React.createElement的函数创建出来的
ReactElement对象 - React利用
ReactElement对象组成了一个JavaScript的对象树 - JavaScript的对象树就是虚拟DOM
6.2.虚拟DOM在React中的作用
- 虚拟DOM 通过diff算法 - 以最⼩的代价更新变化的视图
- 跨平台渲染
- 声明式编程 - 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
-
- 你只需要告诉React希望让UI是什么状态
- React来确保DOM和这些状态是匹配的
- 不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来
