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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

> 
> 再通过`root.render()`函数向根组件中渲染元素, 参数传要渲染的元素
> 
> 
> 

![在这里插入图片描述](https://img-blog.csdnimg.cn/4007f51789f44ed0bfc3f1ee8be6e658.png#pic_center)




---


#### Hello React案例升级


**为了演练React，我们可以提出一个小的需求**:



> 
> 在界面显示一个文本:Hello World
> 
> 
> 点击下方的一个按钮，点击后再将文本改变为Hello React
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/c73a892d52754c12b8f4bf128b788bb9.png#pic_center)


**第一步: 将元素渲染到页面**



> 
> jsx中是通过`{}`绑定变量, 大家先对jsx语法有个体验即可, 后面会详细讲解jsx语法
> 
> 
> 

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



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

const app = ReactDOM.createRoot(document.querySelector(“#app”))

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

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

// 修改完成后需要重新渲染界面
app.render((

{message}

改变文本

))
}

// 第二个小括号表示括号内容是一个整体
app.render((

{message}

改变文本

))

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

const app = ReactDOM.createRoot(document.querySelector(“#app”))

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

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

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

rootRander()
// 封装一个渲染函数
function rootRander() {
// 第二个小括号表示括号内容是一个整体
app.render((

{message}

改变文本

))
}

---


#### 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 (

Hello World

改变文本

)
}
}

const app = ReactDOM.createRoot(document.querySelector(“#app”))
app.render()

---


##### 数据依赖


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


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



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


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



> 
> 我们可以通过在类的构造器中 `this.state = {定义的数据}`
> 
> 
> 当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作;
> 
> 
> 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
> 
> 
> 

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

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

}

// 类中render函数的返回值, 就是要渲染到页面的内容
render() {
return (

{this.state.message}

改变文本

)
}
}

const app = ReactDOM.createRoot(document.querySelector(“#app”))
app.render()

---


##### 事件绑定


**组件化问题二:事件绑定中的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 (

{this.state.message}

改变文本

)
}
}

const app = ReactDOM.createRoot(document.querySelector(“#app”))
app.render()

> 
> 如果有多个按钮, 每次都需要编写`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() {

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

需要这份系统化资料的朋友，可以戳这里获取

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

this.btnClick = this.btnClick.bind(this)

}

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

render() {

[外链图片转存中…(img-1I5e5zRA-1715687219059)]
[外链图片转存中…(img-7EinF2g1-1715687219059)]

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

需要这份系统化资料的朋友，可以戳这里获取

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