【React基础一】React简介和特点、虚拟DOM、JSX、项目搭建、组件与State状态

发布时间:2023年12月17日

1. 背景介绍

1.1 React 是什么?

React 起源于Facebook的内部项目。2013年开源供给大家使用。是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
React的声明式特点减少了操作DOM的性能损耗,同时组件化开发使得大量的组件得以复用。内部实现的虚拟DOM和DOM diff算法使DOM的操作变得高效。

1.2 React 特点

  • 声明式设计 ?React采用声明范式,可以轻松描述应用。
  • 高效 ?React通过对DOM的模拟,最大限度地减少与DOM的交互。
  • 灵活 ?React可以与已知的库或框架很好地配合。
  • JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
  • 组件 ? 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  • 单向响应的数据流 ? React 实现了单向响应的数据流,从而减少了重复代码,也维护的数据安全性

1.3 虚拟DOM

虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化。

1.4 CDN引入React

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

使用CDN方式引入的时候,script片段代码需要申明type为text/babel

1.4 JSX语法

直接写在 JavaScript 语言之中的HTML 语言就是JSX。JSX,是一种 JavaScript 的语法扩展,它允许 HTML 与 JavaScript 的混写。JSX是facebook为React框架开发的一套语法糖

const dom = <h1>Hello, world!</h1>;

你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。

const name = 'Tina';
const element = (
  <div>
     Hello, {name}! 
  </div>
);

1.5 JS语法

react提供了一个createElement方法创建虚拟DOM,方法接收3个参数,第一个参数是标签名,第二是标签属性,第三个是标签内容。

 const dom =  React.createElement('h1','','hello,word!')

2.项目搭建

使用脚手架创建项目

npx是webpack的运行工具

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

添加路由库 react-router-dom

npm i react-router-dom

3.组件

一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)把这些局部功能组装到一起,就形成了组件。在react里,组件的最小颗粒度是一个标签元素

3.1 创建组件

  • 用函数定义组件

    function HelloMessage(props) {
        return <h1>Hello World!</h1>;
    } 
    
  • 使用Class定义组件

    class HelloMessage extends React.Component {
      render() {
        return <h1>Hello World!</h1>;
      }
    }
    

4.State状态

React 把组件看成是一个状态机。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

在React中,我们可以在组件(Class定义的组件)里添加一个类构造函数来初始化状态 this.state,类组件应始终使用 props 调用基础构造函数。

class HelloMessage extends React.Component {
   constructor(props) {
    super(props);
    this.state = {name: 'World'};
  }
  render() {
    return <h1>Hello {this.state.name}!</h1>;
  }
}

更改组件的name属性,即可更改页面渲染结果

class HelloMessage extends React.Component {
   constructor(props) {
    super(props);
    this.state = {name: 'World'};
  }
  nameChange(){
  	 this.setState({
         name:'Tina'
     })
  }
  render() {
    return <div>
        	<h1>Hello {this.state.name}!</h1>
      		<button onClick={()=>{this.nameChange()}}>变身</button>
        </div>;
  }
}
文章来源:https://blog.csdn.net/qq_39335404/article/details/135050406
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。