从零开始学React-coderwhy React课程笔记(一)

第一天: 邂逅React-React的特点-React组件化开发方式

学习React的必要性

React 是前端必须掌握的一个JavaScript框架

在前端职业发展的过程中,不要给自己设限,不要仅仅将自己局限在某一个框架或者技术中

学习React的前置知识

  • JavaScript

    React本身对JavaScript要求较高,可以说写React就是在写JS

  • ES6

    需要掌握一些高级的JavaScript语法

React介绍

React 是用于构建用户界面的JavaScript库

React 的特点:

  1. 声明式编程
    • 允许我们只需要维护自己的状态,当状态改变时,React可以根据最新的状态渲染我们的UI界面
  2. 组件化开发
    • 将复杂的界面拆分为一个个小的组件
    • 如何合理地进行组件的划分和设计
  3. 多平台适配
    • React Native 开发移动端项目

React的开发依赖

  • react: 包含React所必须的核心代码

  • react-dom: React渲染在不同平台所需要的核心代码

  • babel: 将JSX转换成React代码的工具

使用 React 类组件写一个小案例

案例说明:默认页面展示 Hello World,点击按钮后展示Hello React

1.引入相关的依赖

暂时使用 CDN 进行引入

html 复制代码
<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>

2.编写一个类组件

相关知识点如下图,coderwhy 老师已经总结得很详细了。

这里我们跟着 coderwhy 老师一步一步来,先写一个类组件渲染出 Hello world

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好,React</title>
</head>

<body>
    <div id="root"></div>
    <!-- 引入依赖 -->
    <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>

    <script type="text/babel">

      // 定义一个类组件
      class App extends React.Component {
        
        // 构造函数
        constructor() {
            super();
            this.state = {
                message: "Hello World"
            };
        }

        render() {
          // 返回需要渲染的 JSX 内容,最好用()包一下
          return(<div>{this.state.message}</div>);
        }
      }
      // 渲染根组件
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
</body>

</html>

3.写组件数据与组件方法

组件数据 可以分为两类:参与界面更新的数据和不参与界面更新的数据。参与界面更新的数据我们也可以称之为是参与数据流 ,这个数据是定义在当前对象的state中。

对于类组件而言,在构造函数的 this.state 里面定义。如何修改这个 state :使用 React 提供的一个 setState 方法

组件方法 :对于类组件而言,写在 render() 的外层,即实例方法。我们定义一个方法,点击按钮的时候调用这个方法,修改 message 的值。

javascript 复制代码
btnClick(){
    this.setState({
        message: "Hello React",
    });
}

render() {
  // 返回需要渲染的 JSX 内容,最好用()包一下
  return(
    <div>
        {this.state.message}
        <button onClick={this.btnClick}>按钮</button>
    </div>
    );
}

但是像上面这么写会遇到一个问题:btnClick 里边的 this 的值是 undefined

原因在于:

  1. this.btnClick 这个函数传递给点击事件回调函数 onClick,但在onClick里边进行回调时,并没有指定调用的对象
  2. 正常情况下,btnClick 函数里面的 this 默认会指向 window,即顶级作用域的 this
  3. 但这里我们使用了 Babel,Babel 假设所有输入的代码都是 ES6。ES6 模块默认是严格模式(strict mode)
  4. 在严格模式下,浏览器的顶级作用域的 this 不是 window,而是 undefined

coderwhy 老师说这是学习 React 会遇到的第一个难点,确实,如果对 this 指向概念不熟悉的话碰到会有点懵

那么,应该如何解决这个问题呢?可以利用 bind 方法将组件对象绑定到 btnClick 函数上:

html 复制代码
<button onClick={this.btnClick.bind(this)}>按钮</button>

第一天:邂逅React完

相关推荐
中微子8 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang9 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课37 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在37 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵40 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius40 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91043 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy1 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
hxmmm1 小时前
react合成事件
react.js