React相关 | 豆包MarsCode AI刷题

用户75840252068
34 阅读3分钟

学习了这么多天了，有一定的收获，但是对于个人来说，课程内容还是比较偏向高深，对基础不好的来说不怎么友好，但也在努力跟上。

Reac

React是一个用于构建用户界面的JavaScript库，主要用于构建单页应用（SPA），通过组件化的方式来组织代码，使得界面开发更加模块化和高效。

React核心概念

  1. 组件（Component） ：React的基本构建块，可以是函数式组件或类组件。组件可以接收props（属性）并返回React元素。
  2. JSX：一种JavaScript的语法扩展，允许在JavaScript代码中写HTML标记。JSX不是必须的，但它是React开发中的常见做法。
  3. 状态（State） ：组件的记忆，用于存储组件的私有数据，当状态改变时，组件会重新渲染。
  4. 属性（Props） ：从父组件传递给子组件的数据

引入React和ReactDOM

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

创建一个React组件

<div id="app"></div> 
<script type="text/babel">
  function HelloWorld() {
    return <h1>Hello, React!</h1>; 
  } 
  ReactDOM.render(<HelloWorld />, document.getElementById('app')); 
 </script>

使用state和props

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
       <button onClick={() => setCount(count + 1)}>Increment</button>
     </div>
    );
   }
   export default Counter;

import React from 'react';
import ReactDOM from 'react-dom'; 
import Counter from './Counter'; 
ReactDOM.render(<Counter />, document.getElementById('root'));

核心特性

  1. 虚拟DOM：虚拟DOM是一个在内存中表示真实DOM的轻量级副本。每当组件的状态改变时，React首先在虚拟DOM中进行更新，然后计算出最小的变更，最后将这些变更应用到真实DOM。
  2. 事件处理：React提供了一种简洁的事件处理方式，开发者可以直接在JSX中添加事件处理程序。例如，通过onClick属性来处理按钮的点击事件。
  3. 生命周期管理：每个组件都有一个生命周期，React提供了一些生命周期方法来帮助开发者在组件的不同阶段执行特定的操作。函数组件可以使用Hooks来实现类似的功能。

React组件主要分为两种类型：类组件和函数组件。

  1. 类组件：类组件是通过创建class继承React.Component来创建的。它们使用ES6的class语法定义，并可以拥有自己的状态和生命周期方法。在React 16.8之前，类组件是唯一能够使用状态和生命周期方法的组件类型。类组件的三大核心属性是state、props和refs。

    • state：组件的状态，是一个对象，可以包含多个key-value组合。通过更新组件的state来更新对应的页面显示（重新渲染组件）。修改state需要使用this.setState方法。
    • props：组件的属性，是组件对外的接口，由外部通过JSX属性传入。每个组件对象都会有props属性，组件标签的所有属性都保存在props中。props是只读的，组件内部不要修改props数据。
    • refs：一个对象，持有对渲染在DOM中的某个节点的引用。可以通过为元素添加ref属性来访问DOM节点或React元素。

  2. 函数组件：函数组件是一个接收属性并返回JSX元素的函数。函数组件没有状态和生命周期方法，因此适用于简单的静态展示。然而，随着React Hooks的引入，函数组件也可以使用状态和其他React特性，这使得函数组件在React应用中变得越来越流行。

React是一个强大且灵活的JavaScript库，通过组件化、声明式编程和虚拟DOM提供了一种高效的方式来构建用户界面。随着生态系统的不断发展，React已成为现代前端开发中不可或缺的一部分。无论是构建简单的网页还是复杂的应用程序，React都为开发者提供了丰富的工具和资源，使得开发过程更加高效和愉快。

avatar
文章
阅读
粉丝