likes
comments
collection
share

从零开始学React-coderwhy React课程笔记（一）

作者站长头像
站长
· 阅读数 35

第一天: 邂逅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 进行引入

<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 老师已经总结得很详细了。

从零开始学React-coderwhy React课程笔记（一）

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

<!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 的值。

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 函数上：

<button onClick={this.btnClick.bind(this)}>按钮</button>

第一天：邂逅React完

转载自:https://juejin.cn/post/7281840911796682764
评论
请登录