react 初级基础

react基本使用

项目创建

• 项目的创建命令 npx create-react-app react-basic
• 创建一个基本元素进行渲染 

// 1 导入react 和 react-dom
import React from "react";
import ReactDOM from "react-dom";
 
// 2 创建 react 元素 React提供了创建元素的api ReactDOM 渲染页面
/**
 * 第一个参数：要创建的标签名称
 * 第二个参数：元素自身的属性，没有就写null,有就传入一个对象
 * 第三个及以后的所有参数：统统为元素的子节点
 */
const h1 = React.createElement("a", { href: "http://baidu.com" }, "点击去百度");
 
// 3 渲染 react 元素 ReactDOM提供了渲染元素的api
ReactDOM.render(h1, document.querySelector("#root"));

注意：ReactDOM 渲染在React 18中不再被支持。请使用createRoot。在你切换到新的API之前，你的应用程序会像运行React 17一样运行

import { createRoot } from 'react-dom/client';
import App from './App'
const h1 = React.createElement("div", { id:'box',className:'demo' }, "hello");
 
const el = React.createElement("ul", { className: 'list' }, 
    React.createElement('li', null, '香蕉'),
    React.createElement('li',null,'香蕉'),
    React.createElement('li',null,'香蕉'),
);
 
const container = document.getElementById('root');
const root = createRoot(container);
root.render(h1)
root.render(el)
root.render(<App></App>)

JSX语法

jsx是react的核心内容

注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。

babel 试一试

在 babel 的试一试中，可以通过切换 React Runtime 来查看：

1. Classic -> React.createElement：注意这种方式，需要依赖于 React，也就是只要在代码中写 JSX 就必须导入 React 包

2. Automatic -> _jsxRuntime：不依赖于 React 包，因此，代码中可以省略 React 包的导入【最新的脚手架已经默认值采用这种形式】

总结

1. 使用jsx创建元素是react声明式UI的体现

2. 使用jsx语法更加直观，降低学习成本，提高开发效率

jsx在 react 内部的运行做了什么转换？React Runtime(react运行时)

React Runtime(react运行时)分两种形式，一种是通过Classic转换成了传统的 eact.createElement 元素形式，另一种是通过Automatic ->_jsxRuntime.jsx的形式（可见babel官网）

项目配置工作：

• 使用prettier插件格式化，可以格式化react代码（settings.json）

// 编辑器保存的时候用使用prettier进行格式化

"editor.formatOnSave": true,

// 编辑器默认使用prittier作为格式化工具

"editor.defaultFormatter": "esbenp.prettier-vscode",

// 不要有分号

"prettier.semi": false,

// 使用单引号

"prettier.singleQuote": true,

•  配置vscode ,在vscode中使用tab键可以快速生成html内容进行标签提示（settings.json）

// 配置vscode ,在vscode中使用tab键可以快速生成html内容
// 在js中启用emmet语法
"emmet.includeLanguages": {
    "vue-html":"html",
    "javascript":"javascriptreact",
    "postcss":"css",
    "wxml":"html"
},
// 按tab键展开emmet语法
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true

jsx中渲染JS数据

jsx格式

• jsx中可以出现任意的js表达式

• 在jsx中只能出现js表达式，不能出现js语句，比如if、for、while等

const name = 'zs'
const age = 18
 
// 这就是jsx 表达格式
const title = (
  <h1>
    姓名：{name}, 年龄：{age}
  </h1>
)
 
// jsx 本身也可以是一个表达式
const span = <span>我是一个span</span>
const title = <h1>JSX 做为表达式：{span}</h1>

使用 单花括号，括号中可以使用js表达式，不能使用语句例如if
JS 表达式：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）
+ + 特点：==有值== 或者说 能够计算出一个值
  + 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
  + 1 + 2、'abc'.split('')、['a', 'b'].join('-')
  + function fn() {}、 fn() - 注意：*函数调用可以渲染返回值，函数不能直接渲染，但是，
将来可以作为事件处理程序，因此，总的来说也可以出现在 {} 中*
  + 验证是不是 JS 表达式的技巧：看内容能不能作为方法的参数，比如，`console.log( 表达式 )`
  + jsx本身也是一个表达式
 
+ 在jsx中使用表达式语法：`{ JS 表达式 }`
  - 比如，`<h1>你好，我叫 {name}</h1>`
const name = '强哥'
const h1 = <ul>{ name}</ul>

 jsx条件渲染

• 在react中，一切都是javascript，所以条件渲染完全是通过js来控制的

• 在react中，可以使用if/else或三元运算符或逻辑与(&&)运算符实现条件的渲染

const isLoding = false
const loadData = () => {
  if (isLoding) {
    return <div>数据加载中.....</div>
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}
 
const title = <div>条件渲染：{loadData()}</div>

jsx列表渲染

• 作用：重复生成相同的 HTML 结构，比如，歌曲列表、商品列表等

• 实现：使用数组的 map 方法

• 注意：需要为遍历项添加 key 属性

  • key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用的

  • key 在当前列表中要唯一

  • 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值

  • 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

const songs = [
  { id: 1, name: '痴心绝对' }, 
  { id: 2, name: '像我这样的人' }, 
  { id: 3, name: '南山南' }
]
 
const dv = (
  <div>
    <ul>{songs.map(song => <li key={song.id}>{song.name}</li>)}</ul>
  </div>
)

jsx样式处理

• 行内样式 - style

  1. 像 width/height 等属性，可以省略 px，直接使用 数值 即可

  2. 如果是需要使用百分比的单位，此时，继续使用字符串的值即可（比如，"60%"）

• 类名 - className【推荐】实际项目中推荐使用classNames

• 行内样式-style

const dv = (
  
style样式
)

• 类名-className

// 导入样式
import './base.css'
const dv = 
style样式

总结：

组件基础

React创建组件-函数组件

• 函数组件：使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件

  • 约定1：函数名称必须以大写字母开头，React 据此区分组件和普通的 HTML标签

  • 约定2：函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

• 使用函数创建组件

// 使用普通函数创建组件：
function Hello() {
  return <div>这是我的第一个函数组件!</div>
}
 
// 使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件!</div>

•  使用组件

  • 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数返回值对应的内容

  • 使用函数名称作为组件标签名称

// 使用 单标签/双标签 渲染组件：
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
        <>
            <Button />,
            <Hello />
        </>
)

React创建组件-类组件

• 使用 ES6 的 class 创建的组件，叫做类（class）组件

• 约定1：类名称也必须以大写字母开头

• 约定2：类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性

• 约定3：类组件必须提供 render 方法

• 约定4：render 方法必须有返回值，表示该组件的 UI 结构

import React, { Component} from "react";
import { createRoot } from 'react-dom/client';
// class Create extends React.Component{}
class Create extends Component{
    render(){
        return <span>React创建组件-类组件</span>
    }
}
 
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<>
    <Create></Create>
</>)

 将组件提取到单独的js文件中

• 将react组件提取到独立的js文件中，组件作为一个独立的个体，一般都会放到一个单独的 JS 文件中

// index.js
import Hello from './Hello'
// 渲染导入的Hello组件
root.render(<Create></Create>)
 
 
// Hello.js
import { Component } from 'react'
class Hello extends Component {
  render() {
    return <div>Hello Class Component!</div>
  }
}
// 导出Hello组件
export default Hello

有状态组件和无状态组件

• 函数组件又叫做无状态组件 函数组件是不能自己提供数据【前提：不考虑 hooks 的情况下】，函数组件是没有状态的，只负责页面的展示（静态，不会发生变化），性能比较高
• 类组件又叫做有状态组件 类组件可以自己提供数据，负责更新UI，只要类组件的数据发生了改变，UI 就会发生更新（动态）
• 函数组件和类组件的区别：有没有状态【前提：不考虑 hooks 的情况下】，状态（state）是组件的私有数据，当组件的状态发生了改变，页面结构也就发生了改变（数据驱动视图），在项目中，一般都是由函数组件和类组件共同配合来完成的

• 比如计数器案例，点击按钮让数值+1， 0和1就是不同时刻的状态，当状态从0变成1之后，UI也要跟着发生变化。React想要实现这种功能，就需要使用有状态组件来完成

• 类组件的状态

  • 状态state，即数据，是组件内部的私有数据，只能在组件内部使用

  • 状态 state 的值是对象，表示一个组件中可以有多个数据

  • 通过 this.state.xxx 来获取状态

class Hello extends Component {
  // 为组件提供状态
  state = {
    count: 0,
    list: [],
    isLoading: true
  }
 
  render() {
   // 通过 this.state 来访问类组件的状态
    return (
      
计数器：{this.state.count}
    )
  }
}

 setState 修改状态

• react核心理念 -- 状态不可变 状态不可变指的是：不要直接修改状态的值，而是基于当前状态创建新的状态值
• 语法：this.setState({ 要修改的部分数据 })
• setState() 作用：1 修改 state 2 更新 UI，setState 是从 Component 父类继承过来的
• 思想：数据驱动视图，也就是只需要修改数据（状态）那么页面（视图）就会自动刷新

class Hello extends Component {
  state = {
    count: 0
  }
 
  handleClick = () => {
    this.setState({
      count:  this.state.count + 10
    })
  }  
 
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.handleClick}>按钮+1</button>
      </div>
    )
  }
}

setState 进阶

理解setState 延迟更新数据

• setState 方法更新状态是同步的，但是表现为延迟更新状态（注意：非异步更新状态！！！）

• 延迟更新状态的说明：

  • 调用 setState 时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）

  • 如果多次调用 setState 更新状态，状态会进行合并，后面覆盖前面

  • 等到所有的操作都执行完毕，React 会拿到最终的状态，然后触发组件更新

• 优势：多次调用 setState() ，只会触发一次重新渲染，提升性能

setState箭头函数的语法

• 解决多次调用依赖的问题

• 推荐：使用 setState((prevState) => {}) 语法

• 参数 prevState：表示上一次 setState 更新后的状态

this.setState((prevState) => {
  return {
    count: prevState.count + 1
  }
})

 使用setState的回调函数

• 第二个参数，操作渲染后的DOM
• 场景：在状态更新（页面完成重新渲染）后立即执行某个操作
• 语法：setState(updater[, callback])

this.setState(
    (state) => ({}),
    () => {console.log('这个回调函数会在状态更新后并且 DOM 更新后执行')}
)

同步or异步

• setState本身并不是一个异步方法，其之所以会表现出一种“异步”的形式，是因为react框架本身的一个性能优化机制

• React会将多个setState的调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新

• setState如果是在react的生命周期中或者是事件处理函数中，表现出来为：延迟合并更新（“异步更新”）

• setState如果是在setTimeout/setInterval或者原生事件中，表现出来是：立即更新（“同步更新”）

class App extends Component {
  state = {
    count: 0
  }
  // 点击按钮，分别查看 情况1 和 情况2 的 render 打印次数
  handleClick = () => {
    // 情况1
    // react框架内部有一个表示批量更新的标记isBatchingUpdates
    // 当我们点击按钮触发了react自己的事件后，这个标记就被修改为true,表示合并批量更新，
    // 所以，此时调用setState的时候，并不会立即更新状态，而是存储到了一个队列中
    // 将来等到所有的操作都执行完成后，Ract就会合并所有的状态更新，一次性的更新状态
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 1
    })
    
    // 情况2
    // 注意：这种情况下，每次调用setState都会立即更新状态，并且让组件重新渲染
    // 因为定时器中的代码是异步代码，定时器中的代码不会被立即执行而是放到了事件队列
    // 事件队列中的代码，会在JS主线程（同步代码）都执行完成后，再执行。
    // 当主线程中的代码执行完成后，React已经将isBatchingUpdates标记设置为false
    // 此时，再调用setState(),此时，因为批量合并更新的标记已经是false
    // 所以，React会调用一次setState就立即更新一次状态，并且立即渲染
    // setTimeout(() => {
    //   this.setState({
    //     count: this.state.count + 1
    //   })
    //   this.setState({
    //     count: this.state.count + 1
    //   })
    // }, 0)
 
    // ReactDOM.unstable_batchedUpdates这个api可以解决下面这种叠加更新的问题
    // setTimeout(() => {
    //     ReactDOM.unstable_batchedUpdates(() => {
    //         this.setState({
    //             count: this.state.count + 1
    //         })
    //         this.setState({
    //             count: this.state.count + 1
    //         })
    //     })
    // }, 0)
  }
 
  render() {
    console.log('render')
    return (
      <div>
        <Child count={this.state.count} />
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

表单 -- 受控组件

•  能够使用受控组件的方式获取文本框的值

• HTML中表单元素是可输入的，即表单元素维护着自己的可变状态（value）

• 在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改

• React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值

• 受控组件：value值受到了react状态控制的表单元素

• 使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要操作对应的状态即可

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
 
  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }
 
  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

表单 -- 非受控组件-ref

•  非受控组件借助于ref，使用原生DOM的方式来获取表单元素的值

// 1 导入 createRef 函数（ 用来创建 ref 对象 ）
import { createRef } from 'react'
 
class Hello extends Component {
  // 2 调用 createRef 函数来创建一个 ref 对象
  //   命名要规范： txt（DOM 元素的自己标识） + Ref
  txtRef = createRef()
 
  handleClick = () => {
    // 4 获取文本框的值：
    console.log(this.txtRef.current.value)
  }
 
  render() {
    return (
      <div>
         // 3 将创建好的 ref 对象，设置为 input 标签的 ref 属性值
        <input ref={this.txtRef} />
        <button onClick={this.handleClick}>获取文本框的值</button>
      </div>
    )
  }
}

事件处理

注册事件

• React注册事件与DOM的事件语法非常像

• 语法on+事件名 =｛事件处理程序｝ 比如onClick={this.handleClick}

• 注意：React事件采用驼峰命名法，比如onMouseEnter, onClick

- React注册事件与DOM的事件语法非常像
 
- 语法`on+事件名 =｛事件处理程序｝` 比如`onClick={this.handleClick}`
 
- 注意：*React事件采用驼峰命名法*，比如`onMouseEnter`, `onClick`

事件对象 

• 可以通过事件处理程序的参数获取到事件对象

• 注意：React 中的事件对象是 React 内部处理后的事件对象，一般称为：SyntheticBaseEvent 合成事件对象。用法与 DOM 原生的事件对象用法基本一致

function handleClick(e) {
  e.preventDefault()
  console.log('事件对象', e)
}
 
<a onClick={this.handleClick}>点我，不会跳转页面</a>

  this指向问题

• 事件处理程序中的this指向的是undefined

• render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题

• 原因：事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined

• render函数是被组件实例调用的，因此render函数中的this指向当前组件

下述代码：在react的事件处理函数中，this指向`undefined`
class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg) // this是undefined
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我button>
      div>
    )
  }
}

this指向解决方案 

• 方式1：箭头函数

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={() => this.handleClick()}>点我</button>
      </div>
    )
  }
}

•  方式2：bind，绑定this，返回一个新函数=>事件处理程序

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      
        this.handleClick.bind(this)}>点我