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

React---day1

news 2025/5/24 8:53:49

React

它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面

开发React必须依赖三个库：

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

1、初识react

HelloWorld

注意：

这里我们编写React的script代码中，必须添加 type=“text/babel”，作用是可以让babel解析jsx的语法
ReactDOM.render函数：
参数一：传递要渲染的内容，这个内容可以是HTML元素，也可以是React的组件
这里我们传入了一个h2元素，后面我们就会使用React组件
参数二：将渲染的内容，挂载到哪一个HTML元素上
这里我们已经提定义一个id为app的div
变量不同于vue，这里使用的是{}
function定义函数
message发生改变之后要进行重新渲染

  <!-- 导入资源 --><!-- crossorigin:远程的js脚本的错误打印出来 --><script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app"></div><script type="text/babel">// ReactDOM.render(渲染的内容 , 渲染的位置 )let message = 'hello world'function btnClick(){message = 'hello react'console.log(message)render() // 重新渲染}const render  = () => {ReactDOM.render(// 只能有一个根标签<div><h1>{message}</h1><button onClick={btnClick}>改变文本</button></div>,document.getElementById('app'))} render() // 第一次渲染</script>

组件化：

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

我们说过 ReactDOM.render 第一参数是一个HTML原生或者一个组件；

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

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

定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component
实现当前组件的render函数

render当中返回的jsx内容，就是之后React会帮助我们渲染的内容

    <!-- 导入资源 --><!-- crossorigin:远程的js脚本的错误打印出来 --><script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app"></div><script type="text/babel">//   组件化-使用class定义class App extends React.Component{render(){return (<div><h1>hello world</h1></div>)}}ReactDOM.render(<App/> , document.getElementById('app'))</script>

数据依赖：

数据在哪里定义？

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

我们可以通过在构造函数中 this.state = {定义的数据}，当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作，在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面。
```
   // 定义构造函数constructor(){// 调用父类的构造函数super()// 定义状态this.state = {message: 'hello world'}}
```
事件绑定中的this

在类中直接定义一个函数，并且将这个函数绑定到html原生的onClick事件上，当前这个函数的this指向的是谁呢？默认情况下是undefined 很奇怪，居然是undefined；因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；那么在这里发生监听的时候，react给我们的函数绑定的this，默认情况下就是一个undefined；解决方法：我们就需要在传入函数时，给这个函数直接绑定this(使用bind)

**总结：**啦啦，今天对react有了一点点新的认识捏，从react的基本框架到绑定数据最后再到编写函数改变数据的值，让我一步一步揭开react的面纱，它的语法确实要灵活很多，组件化也体现了出来，很期待接下来的学习内容。

查看全文

http://www.xdnf.cn/news/563059.html