当前位置：首页 > news >正文

React组件化的封装

news 2025/8/2 9:33:19

1. 组件化封装的结构

1.1. 定义一个类(组件名必须是大写，小写会被认为是html元素), 继续自React.Component
1.2. 实现当前组件的render函数
- render当中返回的jsx内容，就是之后React会帮助我们渲染的内容

1.3. 结构图如下：

  data 方法render() // 具体渲染的内容

2. 组件化-数据依赖

组件化问题：数据在那里定义？

2.1. 在组件中的数据，可以分成两类：
- 参与界面更新的数据：当数据变化时，需要更新组件渲染的内容
- 不参与界面更新的数据：当数据变化时，不需要更新组件渲染的内容
2.2. 参与姐妹更新的数据又称为参与数据流，这个数据定义在当前对象的state中
- 在构造函数中this.state = { 定义的数据 }
- 当数据发生变化时，可以调用this.setState({更新的数据})来更新数据，并且通知React进行update操作
  - 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面。

3. 组件化-事件绑定

3.1. 组件化问题二： ·事件绑定中的this·
- 在类中直接定义一个函数，并且将这个函数绑定到元素的onClick事件上，当前这个函数的this指向是undefined
3.2. 默认情况下是undefined：(因为在babel转化成严格模式或者ES6语法中类是严格模式，严格模式下，this指向undefined)
- 很奇怪，居然是undefined
- 因为在正常的DOM操作中，监听点击，监听函数中的this指向其实节点对象(比如说button对象)
- 这次因为React并不是直接渲染成真实的DOM，编写的button只是一个语法糖，它的本质是React的Element对象；
- 那么在这里发生监听时，react在执行函数时并没有绑定this, 默认情况下就是一个undefined

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

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

类似于

constructor(props) {super()this.state = {message: 'hello World'}// 对需要绑定的方法，提前绑定好thisthis.btnClick = this.btnClick.bind(this)}{/* 写法一：bind(this) */}{/* <button onClick={this.btnClick.bind(this)}>修改文本</button> */}{/* 写法二：统一在构造函数中绑定this, 函数调用的时候不用bind(this) */} <button onClick={this.btnClick}>修改文本</button>

4. React数据事件处理

4.1. 如果原生DOM有一个监听事件，我们可以如何操作
- 方式一：获取DOM原生，添加监听事件
- 方式二：在HTML原生中，直接绑定onclick;
4.2. 在React中是如何操作呢？React的事件监听，主要有两点不同：
- React事件的命名采用小驼峰式(camelCase), 而不是纯小写
- 需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行；

5. React组件的分类重构代码

5.1. 组件分为：类组件和函数组件

类组件： class App extends React.Component

      class App extends React.Component {constructor () {super()this.state = {message: 'hello world',counter: 100}}render () {const  { message } = this.statereturn  (<div><h2>{ message }</h2></div>)}}```

函数组件：

  function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);}export default App;

5. 编写`Hello_React`案例

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

注意：编写React的script代码中，必须添加type="text/babel", 作用是可以让babel解析jsx的语法。
完整代码如下：

  <script type="text/babel">const root = ReactDOM.createRoot(document.querySelector('#root'))// 将文本定义成变量let message = 'hello World'const root = ReactDOM.createRoot(document.querySelector('#root'))root.render(<h2>{message}/h2>)</script>

5.2. ReactDOM.createRoot函数：用于创建一个React根，之后的渲染的内容会包含在这个根中。
- 参数：将渲染的内容，挂载到哪个HTML元素上
  - 根元素：id为root的元素
5.3. root.render()
- 参数：要渲染的根组件

5.4. 完整代码：

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="root"></div><!-- 1. CDN引入 --><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><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- 2. 编写React代码 --><script type="text/babel">const root = ReactDOM.createRoot(document.querySelector('#root'))// 将文本定义成变量let message = 'hello World'// 监听按钮的点击function btnClick () {  // 1.1 修改数据message = '你好啊 李银河'// 1.2. 重新渲染界面(原因：React默认情况下不会重新执行渲染界面的， React是没有黑魔法的，黑魔法：所有东西都是可见的)rootRender()}// 3. 封装一个渲染函数function rootRender () {// 使用()把所有的html括号包裹起来，代表的是一个整体root.render((<div><h1>{message}</h1><button onClick={btnClick}>修改文本</button>  </div>))}rootRender()</script></body></html>

6. 使用组件重构代码

6.1 完整代码如下：

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">// 1.定义App根组件class App extends React.Component {constructor () {super()this.state = {message: 'hello world',counter: 100}}render () {const  { message } = this.statereturn  (<div><h2>{ message }</h2></div>)}}// 2. 创建root并且渲染App组件const root = ReactDOM.createRoot(document.querySelector('#root'))root.render(<App/>)</script></body></html>