React
一、React 依赖
1、开发React 必须依赖三个库
- react：包含react 所必须的核心代码
- react--dom：react 渲染在不同平台所需要的核心代码
- babel：将jsx 转换成React 代码的工具
2、babel
- 因为很多浏览器不支持ES6+ 的语法，需要通过babel 工具转换成ES5 的语法
- React 和babel 的关系：当通过React.createElement 来编写源代码，是不需要用到babel ，但这种方法比较繁琐、可读性查。所以可以直接编写jsx 语法，并让babel 转换成React.createElement
二、JSX 语法
1、jsx 的注释 {/* */}
2、jsx 嵌入变量作为子元素
- 情况一：当变量是Number、String、Array 类型时，可以直接显示
- 情况二：当变量是null、undefined、Boolean 类型时，内容为空
- 如果希望可以显示null、undefined、Boolean，那么需要转成字符串
- 转换的方式有很多，比如toString 方法和空字符串拼接，String(变量) 等方式
- 情况三：Object 对象类型不能作为子元素
class App extends react.Component {
construstor(){
super()
this.state = {
message: "Hello",
}
}
render(){
const { message } = this.state
return (
{message}
)
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(3、jsx 嵌入变量作为属性值
class App extends react.Component {
constructor(){
super()
this.state = {
imgURL: "http://www.img.com"
}
}
render(){
const { imgURL} = this.state
return (
)
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(4、动态绑定类名
- 字符串拼接
- 将所有的class 放到数组中
- 第三方库 classnames
class App extends react.Component {
constructor(){
super()
this.state = {
isActive: true
}
}
render(){
const { isActive} = this.state
// 1. 字符串拼接
const className = `abc cba ${ isActive ? 'active' : '' }`
// 2. 将所有的class 放到数组中
const classList = ["abc", "cba"]
if(isActive) classList.push("active")
// 3. 第三方库 classnames
return (
哈哈哈
哈哈哈
)
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(5、 动态绑定样式（内联样式）
class App extends react.Component {
constructor(){
super()
this.state = {
objStyle: {color: "red", fontSize: "30px"}
}
}
render(){
const { objStyle } = this.state
return (
哈哈哈
哈哈哈
)
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(6、jsx 的事件绑定
1、当事件中不需要this 绑定时
class App extends react.Component {
constructor(){
super()
this.state = {
message: "Hello"
}
}
btnClick() {
con.log("btnClick")
}
render(){
const { message } = this.state
return (
)
}
}2、当事件中需要this 绑定时 （重点方法3，箭头函数写法）
class App extends react.Component {
constructor(){
super()
this.state = {
counter: 100,
message: "Hello"
}
// 在这里写也可以, 在render 函数中直接通过this.btn1Click 调用即可
// this.btn1Click = this.btn1Click.bind(this)
}
btn1Click() {
con.log("btn1Click", this)
this.setState({
counter: this.state.counter + 1
})
}
btn2Click = () => {
con.log("btn2Click", this)
this.setState({
counter: this.state.counter + 2
})
}
// *
btn3Click() {
con.log("btn3Click", this)
this.setState({
counter: this.state.counter + 3
})
}
render(){
const { counter, message } = this.state
return (
当前计数: {this.state.counter}
)
}
}3、当进行事件绑定时，不传递参数如何使用event 事件对象
class App extends react.Component {
constructor(){
super()
this.state = {
counter: 100,
message: "Hello"
}
}
btnClick(event) {
console.log("btnClick", event, this)
}
render(){
const { counter, message } = this.state
return (
当前计数: {this.state.counter}
)
}
}4、当进行事件绑定时，传递参数如何使用event 事件对象
class App extends react.Component {
constructor(){
super()
this.state = {
counter: 100,
message: "Hello"
}
}
btnClick(event, name, age) {
console.log("btnClick", event, this)
console.log("btnClick", name, age)
}
render(){
const { counter, message } = this.state
return (
当前计数: {this.state.counter}
)
}
}7、jsx 的条件渲染
class App extends react.Component {
constructor(){
super()
this.state = {
isReady: true,
friend: {
name: "kobe",
desc: "ball"
}
}
}
render(){
const { isReady, friend } = this.state
let showElement = null
if(isReady) {
showElement = 准备
} else {
showElement = 未准备
}
return (
方式一：根据条件给变量赋值不同的内容
{showElement}
方式二：三元运算符
{ isReady ? : 准备就绪
}
方式三：逻辑与运算符 &&
使用场景：当某个值有可能为undefined或null 时，可以使用&& 条件判断
例如：服务器中数据还未取回时为null，有了数据后再进行展示
{ friend && { friend.name + " " + friend.desc } }
)
}
}8、jsx 的列表渲染
class App extends react.Component {
constructor(){
super()
this.state = {
students: [
{ id: 1, name:"why", score: 99 },
{ id: 2, name:"kobe", score: 98 },
{ id: 3, name:"james", score: 97 },
{ id: 4, name:"curry", score: 96 }
]
}
}
render(){
const { students } = this.state
return (
{
students.filter(item => item.score > 97).slice(0, 2).map(item => {
return (
学号: {item.id}
姓名: {item.name}
分数: {item.score}
)
})
}
)
}
}9、jsx 的本质
- jsx 只是React.createElement(component, props, ...children) 函数的语法糖
- 所有的jsx 最终都会被转换成React.createElement 的函数调用
- createElement 需要传递三个参数：
- type：当前ReactElement 的类型。如果是标签元素，那么就使用字符串表示 "div"；如果是组件元素，那么就直接使用组件的名称
- config：所有jsx 的属性都在config 中以对象的属性和值的形式存储。比如传入className 作为元素的class
- children：存放在标签中的内容，以children 数组的方式进行存储
三、虚拟DOM
- 通过React.createElement 最终创建出来一个ReactElement 对象
- React 利用ReactElement 对象组成了一个JavaScript 的对象树，这个JavaScript 的对象树就是虚拟DOM
四、组件化开发
1、react 脚手架
- npm install create-react-app -g
- create-react-app 01-test-react
- cd 01-test-react
- yarn start
注意：项目名称不能包含大写字母
2、类组件的特点
- 组件的名称是大写字符开头（无论是类组件还是函数式组件）
- 类组件需要继承自React.Component
- 类组件必须实现render 函数
3、函数式组件的特点（在没有hooks 的情况下）
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数
- this 关键字不能指向组件实例（因为没有组件实例）
- 没有内部状态（state）
4、类组件的基本生命周期
a、Mounting 阶段
constructor → render → （update DOM and refs ）→ componentDidMount()
1、constructor 通常只做两件事情：
- 通过给this.state 赋值对象来初始化内部的state
- 为事件绑定实例（this）
2、componentDidMount() 会在组件挂载后（插入DOM树中）立即调用
- 依赖于Dom 的操作可以在这里进行
- 在此处发送网络请求
- 可以在此处添加一些订阅（可以在componentWillUnmount 取消订阅）
b、updating 阶段
（ new props、setState()、forceUpdate() ）
render → （update DOM and refs ）→ componentDidUpdate()
c、unMounted 阶段
componentWillUnmount()