🌱一文带你初识React

_橙橙子
295 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

🎈大家好，我是橙橙子，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

目前开发栈是Vue，没有React的开发经验，因工作需要，开启了React的漫漫学习之路

React背景

React是Facebook在2013年推出的一个前端开发框架，其定位是：一个网页组件的解决方案。它是一个声明式、高效且灵活的用于构建用户界面的 JavaScript 库。以组件化开发的方式来构建UI。

React特点

react的核心概念有以下4个：

  • 组件化
  • JSX语法
  • Virtual DOM
  • Data Flow，单向数据流

1. 组件化

React认为所有的网页都应该是由一个个的组件搭建而成。每个组件有自己的状态，各自维护自己的状态。 这样代码更容易复用和维护。

🌳举个栗子：

其中HelloInfo 是一个 React 构建的组件，render方法会把这个组件显示到页面上的元素 mountNode 里面，显示的内容就是 <div>Hello, my name is Sara</div>。其中 props 和 state 是组件的两个核心概念。

import React, { Component } from 'react';
import { render } from 'react-dom';

class HelloInfo extends Component {
  render() {
    return <div>Hello, my name is {this.props.name}</div>;
  }
}

// 加载组件到DOM元素 mountNode
render(<HelloInfo name="sara" />, mountNode);

2. JSX

其是 JavaScript 语法的扩展，它将 HTML 嵌入了 JS 代码里面，就是JSX。它需要被编译输出 JS 代码才能使用。

3. Virtual DOM

当组件的状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。

4. Data Flow

单向数据绑定是 React 推荐的一种应用架构的方式。提供了一种数据从上往下传递的方法，而子组件不能直接影响外层组件

React入门

React 为我们提供了两个 JavaScript 包，分别是 react.js 和 react-dom.js。

  • react.js：是 React 的核心库，核心思想是虚拟DOM（Virtual DOM）
  • react-dom.js：提供针对 DOM 操作的相关 API

注意点：react-dom.js 是基于 react.js 的，所以 react.js 先调用 React推荐用JSX来编写代码， 所以还需要在页面中引入 babel-standalone.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>

注意点：通过引入 babel-standalone.js 来编译 JSX 效率是非常低。不推荐

React脚手架

create-react-app介绍

create-react-app是专门用于快速搭建单页面应用（SPA）的脚手架，基于 Webpack + ES6开发，只需要通过一些命令就可以快速构建 React 开发环境、运行项目，并带有热更新，且支持打包生成开发环境可用的构建版本。

创建项目

使用Create React App命令，创建 React 项目，运行以下命令创建并启动一个名为“ my-first-react-demo ”的 React 应用程序

npx create-react-app my-first-react-demo 
cd my-first-react-demo 
npm start

项目结构

image.png

public 文件夹内包含该应用程序将如何显示客户端，index.html是入口文件

image.png

在SRC文件夹包含JavaScript，CSS和图像文件，这些文件将被编译成一个bundle文件并注入到index.html中

image.png

  • index.js：是React应用程序的入口

    ReactDOM.render() 的方法用于在 HTML 中查找id="root" 的元素，并将我们的 React 应用程序添加到该元素中

  • App.js：此文件是将呈现给DOM的主要组件

  • style.css：项目的样式表

  • package.json：保存与项目相关的各种元数据，如依赖项等

React更新元素

React 元素是构成虚拟 DOM 树的基本单元，而 DOM 元素是构成浏览器 DOM 树的基本单元，两者之间存在着一定的对应关系。

DOM 元素是 React 内部根据 React 元素渲染出来的，意味着一个 React 元素对应着页面上的一部分 DOM 元素，每一个 React 元素都由 React 进行管理，一旦 React 元素的状态发生改变，对应部分的 DOM 元素就会被更新，也就实现了用户界面的更新。

React 元素不仅是一个 JavaScript 对象，还是个不可变对象，一旦 React 元素被创建，就无法更改它的子元素或者属性。更新它唯一的方式是创建一个全新的 React 元素，并将其传入 ReactDOM.render。 用一个计时器，一秒调用一次 ReactDOM.render

🌳举个栗子：

function tick() {
    const element = (
        <div>
            <h1>你好</h1>
            <h2>现在时间是 {new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);
avatar
文章
阅读
粉丝