React初体验-Hello React的组件化方式-React入门小案例_react hand-polard(2)

2401_84182337

于 2024-05-03 12:44:51 发布

阅读量396

点赞数 4

分类专栏：程序员文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/2401_84182337/article/details/138413777

版权

程序员专栏收录该内容

133 篇文章 2 订阅

订阅专栏

<!-- 挂载的元素 -->
<div id="app"></div>

<!-- crossorigin用来解决跨域 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- jsx语法编写react代码 -->
<script type="text/babel">
 const app = ReactDOM.createRoot(document.querySelector("#app"))

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

 // 第二个小括号表示括号内容是一个整体
 app.render((
 <div>
 <h2>{message}</h2>
 <button>改变文本</button>
 </div>
 ))
</script>

第二步: 监听按钮点击, 改变message的值

监听按钮点击jsx是通过onClick绑定一个函数, 注意C一定是大写的

const app = ReactDOM.createRoot(document.querySelector("#app"))

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

// 定义一个函数, 处理按钮点击事件
function btnClick() {
  // 修改数据
  message = "Hello React"

  // 修改完成后需要重新渲染界面
  app.render((
    <div>
      <h2>{message}</h2>
      <button onClick={btnClick}>改变文本</button>
    </div>
  ))
}

// 第二个小括号表示括号内容是一个整体
app.render((
  <div>
    <h2>{message}</h2>
    <button onClick={btnClick}>改变文本</button>
  </div>
))

第三步: 简化代码, 上面代码中明显有重复代码, 我们可以抽取到一个函数中

const app = ReactDOM.createRoot(document.querySelector("#app"))

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

// 定义一个函数, 处理按钮点击事件
function btnClick() {
  // 修改数据
  message = "Hello React"

  // 修改完成后需要重新渲染界面
  rootRander()
}

rootRander()
// 封装一个渲染函数
function rootRander() {
  // 第二个小括号表示括号内容是一个整体
  app.render((
    <div>
      <h2>{message}</h2>
      <button onClick={btnClick}>改变文本</button>
    </div>
  ))
}

Hello React的组件化

组件化的方式

Hello React这整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件:

root.render()函数的参数可以是一个HTML元素, 也可以是一个组件;

所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 root.render 函数中的第一个参数;

在React中，如何封装一个组件呢?

React的组件分为两种: 类组件和函数式组件

这里我们暂时使用类的方式封装组件:

定义一个类(类名大写，组件的名称是必须大写的，小写会被认为是HTML元素)，继承自React.Component

// 类继承自React.Component, 才是组件
class App extends React.Component{}

实现当前组件的render函数, render当中返回的jsx内容，就是之后React会帮助我们渲染的内容

class App extends React.Component {
  // 类中render函数的返回值, 就是要渲染到页面的内容
  render() {
    return (
      <div>
        <h2>Hello World</h2>
        <button>改变文本</button>  
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

数据依赖

组件化问题一:数据在哪里定义?

在组件中的数据，我们可以分成两类:

参与界面更新的数据:当数据变量时，需要更新组件渲染的内容;

不参与界面更新的数据:当数据变量时，不需要更新将组建渲染的内容;

参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中(这个名字是固定的)

我们可以通过在类的构造器中 this.state = {定义的数据}

当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作;

在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
  }

  // 类中render函数的返回值, 就是要渲染到页面的内容
  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button>改变文本</button>  
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

事件绑定

组件化问题二:事件绑定中的this

在类中直接定义一个函数，并且将这个函数绑定到元素的onClick事件上，那么问题来了当前这个函数中的this指向的是谁呢?

默认情况下是undefined

很奇怪，居然是undefined;

因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象(比如说是button对象);

这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象;

那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined;

我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this

我们就需要在传入函数时，需要给这个函数直接绑定this

类似于这种写法: <button onClick={this.changeText.bind(this)}>改变文本</button>

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
  }

  btnClick() {
    // setState内部会做两件事情: 1.将state中的值改掉 2.自动执行render函数渲染页面
    this.setState({
      message: "Hello React"
    })
  }

  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={this.btnClick.bind(this)}>改变文本</button>  
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

如果有多个按钮, 每次都需要编写this.btnClick.bind(this)是比较麻烦的, 因此React中还有另一种常见的写法, 在constructor在提前绑定this, 这样就可以直接使用方法

这也是官方文档在的做法

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      message: "Hello World"
    }
    // 为方法提前绑定this
    this.btnClick = this.btnClick.bind(this)
  }

  btnClick() {
    this.setState({
      message: "Hello React"
    })
  }

  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
        <button onClick={this.btnClick}>改变文本</button>  
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

其他案例练习

电影列表展示

定义一个数组中存放电影, 再对电影列表进行展示

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      movies: ["大话西游", "黑话律师", "独行月球"]
    }
  }

  render() {
    return (
      <div>
        <h2>电影列表</h2>
        <ul>
          <li>{this.state.movies[0]}</li>
          <li>{this.state.movies[1]}</li>
          <li>{this.state.movies[2]}</li>
        </ul>  
      </div>
    )
  }
}

const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)

但是显然目前这种方法是好的, 我们最好对movies进行遍历展示, 而遍历的方式又有很多种, 先将下面两种方式

方式一: 对movies数组遍历放入一个新数组中

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      movies: ["大话西游", "黑话律师", "独行月球"]
    }
  }

  render() {
    const liEls = []
    for (let item of this.state.movies) {
      const liEl = <li key={item}>{item}</li>
      liEls.push(liEl)
    }

    return (
      <div>
        <h2>电影列表</h2>


![img](https://img-blog.csdnimg.cn/img_convert/d14d8eedef8876aa0f9bec360e4b37da.png)
![img](https://img-blog.csdnimg.cn/img_convert/121845f13835d4cde050e187a58bc795.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

vies) {
      const liEl = <li key={item}>{item}</li>
      liEls.push(liEl)
    }

    return (
      <div>
        <h2>电影列表</h2>


[外链图片转存中...(img-8NBFFWKF-1714711447372)]
[外链图片转存中...(img-TkInpIrE-1714711447373)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**