React开发

React介绍

• React：用于构建用户界面的 JavaScript 库；
• React官方文档：旧：zh-hans.legacy.reactjs.org/ 新：zh-hans.react.dev/
• ReactNative:开发移动端跨平台应用程序(ios/Android)官网：旧版本，新版本，中文直达

React特点-声明式编程

• 声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；
• 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面；

React特点 – 组件化开发

• 组件化开发页面目前前端的流行趋势，将复杂的界面拆分成一个个小的组件；
• 合理的进行组件的划分和设计

React的特点 – 多平台适配

React安装和依赖-开发★★

开发React必须依赖三个库：

• react：包含react所必须的核心代码
• react-dom：react渲染在不同平台所需要的核心代码
• babel：将jsx转换成React代码的工具

第一次接触React会很繁琐因为它需要引入依赖三个包

• 相比Vue，只是依赖一个vue.js文件即可，但是react要依赖三个包。
• 三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;
• 在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里

为什么要进行拆分呢？原因就是react-native

• react包中包含了react web和react-native所共同拥有的核心代码。
• react-dom针对web和native所完成的事情不同：
  • web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
  • native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

Babel和React的关系★

• Babel ，又名 Babel.js
• 是目前前端使用非常广泛的编译器、转移器
• 比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。
• 那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法

React和Babel的关系：

• 默认情况下开发React其实可以不使用babel。
• 但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
• 我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。

React的依赖引入★★

​
  <div id="root"></div>
  <div id="app"></div>
  
  <!-- 添加依赖 -->
  <!-- 依赖三个包 -->
  <!-- 方式一:CDN引入 -->
  <!-- 这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息 -->
  <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> 
  <!-- babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
​ <!-- 一般使用下载后进行引入  -->
  <!-- 方式二:下载引入 -->
​
  <!-- 方式三: npm下载引入(脚手架) -->
​
  <script type="text/babel">
    // 编写React代码(jsx语法)
    // jsx语法 -> 普通的JavaScript代码 -> babel
​
    // 渲染Hello World
    // React18之前: ReactDOM.render
    // ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#root"))
​
    // React18之后:
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<h2>Hello World</h2>)
​
    // const app = ReactDOM.createRoot(document.querySelector("#app"))
    // app.render(<h2>你好, 林夕</h2>)
​
  </script>

• 第一步：在界面上通过React显示一个Hello World

注意：这里我们编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法

• ReactDOM.createRoot函数：用于创建一个React根，之后渲染的内容会包含在这个根中
  • 参数：将渲染的内容，挂载到哪一个HTML元素上
  • 这里我们已经提定义一个id为app的div
• root.render函数:参数：要渲染的根组件
  • 可以通过{}语法来引入外部的变量或者表达式

上面案例已经介绍了如何引入使用渲染react；

数据定义和函数绑★★★

下面我们使用点击事件来进行修改页面文本内容

<div id="root"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.querySelector("#root"))

// 1.将文本定义成变量
let message = "Hello World"

// 2.监听按钮的点击
function btnClick() {
  // 1.1.修改数据
  message = "Hello React"
  // 2.重新渲染界面
  rootRender()
}

// 3.封装一个渲染函数
function rootRender() {
  root.render((
    <div>
      <h2>{message}</h2>
      <button onClick={btnClick}>点击修改文本</button>
    </div>
  ))
}
rootRender()
</script>

React – 组件化开发★★★

• 整个逻辑可以看做一个整体，由此可以将其封装成一个组件：
  • 上文说过root.render 参数是一个HTML元素或者一个组件；
  • 可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数
• 在React中，封装一个组件：这里使用类的方式封装组件，还有一种函数式组件
  1. 定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component
  2. 实现当前组件的render函数
  • render当中返回的jsx内容，就是之后React会帮助我们渲染的内容

<div id="root"></div>
<script type="text/babel">
// 定义根组件
class App extends React.Component{
  //extends类继承自React.Component
  render(){
    return <div>你好，组件</div>
  }
}
const root=ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)
</script>

render函数若是返回复杂模板可以使用()

<div id="root"></div>
<script type="text/babel">
// 定义根组件
class App extends React.Component{
  //extends类继承自React.Component
  render(){
    return (
      <div>
        <div>你好，组件</div>
        <button>点击按钮</button>
      </div>
    )
  }
}
const root=ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)
</script>

组件化 - 数据依赖★★★

• 组件化问题一:数据在哪里定义
• 在组件中的数据，我们可以分成两类
  • 参与界面更新的数据：当数据变量时，需要更新组件渲染的内容；
  • 不参与界面更新的数据：当数据变量时，不需要更新将组件渲染的内容；
• 参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中
  • 我们可以通过在构造函数中 this.state = {定义的数据}
  • 当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作；
    • 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面

class App extends React.Component {
  // 组件数据
  constructor() {
    super();//继承必须先调用super
    this.state = {
      message: "Hello World",
    }
  }
  btnClick() {
    // 默认绑定在严格模式下this 是undefined
    console.log(this);//undefined因为在类中是默认开启严格模式，
    //如果这里直接调用会报错，因为当前this指向问题，下文解释事件绑定时候this
    // this.setState({
    //   message: "Hello React"
    // })
  }
  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={this.btnClick}>修改文本</button>
      </div>
    )
  }
}
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

组件化 – 事件绑定★★★

• 组件化问题二：事件绑定中的this
  • 在类中直接定义一个函数，并且将这个函数绑定到元素的onClick事件上，当前这个函数的this指向的是谁呢
• 默认情况下是undefined
  • 因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；
  • 这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；
  • 那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined；
• 在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this
  • 我们就需要在传入函数时，给这个函数直接绑定this
  • 类似于下面的写法： "onClick={this.changeText.bind(this)}"

class App extends React.Component {
  // 组件数据
  constructor() {
    super();//继承必须先调用super
    this.state = {
      message: "Hello World",
    }
  }
  btnClick() {
    console.log(this);
    // 方式一
    this.setState({
      message: "Hello 林夕"
    })
    // 方式二
    // this.setState((state) => {
    //   return {
    //     message: "林夕1",
    //     sad: "dsadsa2"
    //   }
    // })
    // 方式三
    // this.setState((state)=>({
    //   message: "林夕2",
    //   sad: "dsadsa2"
    // }))
  }
  render() {
    // onClick={this.btnClick.bind(this)}绑定this其实是render函数中的this
    // 而render函数中的this和btnClick中绑定的this是同一个  就是组件app实例
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={this.btnClick.bind(this)}>修改文本</button>
      </div>
    )
  }
}
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

代码优化绑定this可以在构造函数中修改:旧文档，新文档

// 使用组件进行重构代码
// 类组件和函数式组件
class App extends React.Component {
  // 组件数据
  constructor() {
    super();//继承必须先调用super
    this.state = {
      message: "Hello World",
    }
    // 对需要绑定的方法, 提前绑定好this
    this.btnClick = this.btnClick.bind(this)
  }
  // 组件方法(实例方法)
  btnClick() {
    // 内部完成了两件事情: 
    // 1.将state中message值修改掉 2.自动重新执行render函数函数
    // setState这个方法是继承来的方法
    this.setState({
      message: "Hello 林夕"
    })
  }
  // 渲染内容 render方法
  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={this.btnClick}>修改文本</button>
      </div>
    )
  }
}
// 将组件渲染到界面上
const root = ReactDOM.createRoot(document.querySelector("#root"))
// App根组件
root.render(<App/>)

渲染列表方式显示

// 1.创建root
const root = ReactDOM.createRoot(document.querySelector("#root"))

// 封装App组件
class App extends React.Component {
  constructor() {
    super()

    this.state = {
      sings: ["张杰", "林俊杰", "汪苏泷", "徐良", "许嵩"]
    }
  }
  render() {
    // 1.对sings进行for循环
    const liEls1 = []
    for (let i = 0; i < this.state.sings.length; i++) {
      const movie = this.state.sings[i]
      const liEl = <li>{movie}</li>
      liEls1.push(liEl)
    }
    // 2.sings数组 => liEls2数组
    const liEls2 = this.state.sings.map(movie => <li>{movie}</li>)
    return (
      <div>
        <h2>渲染方式1</h2>
        <ul>
          {liEls1}
        </ul>
        <h2>渲染方式2</h2>
        <ul>
          {liEls2}
        </ul>
        <h2>渲染方式3</h2>
        <ul>
          {this.state.sings.map(movie => <li>{movie}</li>)}
        </ul>
      </div>
    )
  }
}
// 2.渲染组件
root.render(<App />)

简单计数器

const root = ReactDOM.createRoot(document.querySelector("#root"))
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: "Hello World",
      counter: 1
    }

    this.add = this.add.bind(this)
    this.reduce = this.reduce.bind(this)
  }
  // 增加
  add() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
 // 减少
  reduce() {
    this.setState({
      counter: this.state.counter - 1
    })
  }
  render() {
    const { counter } = this.state
    return (
      <div>
        <h2>当前计数: {counter}</h2>
        <button onClick={this.add}>+1</button>
        <button onClick={this.reduce}>-1</button>
      </div>
    )
  }
}
root.render(<App />)

以上案例建议多加练习写熟练