React | 青训营

56 阅读2分钟

我并没有系统地学习过react,只在课程的视频里进行过初步的了解,这里我又结合了外部的资料,谈一谈我对react的理解。

react是一个JavaScript库,是基于JSX语法(JavaScript Xml),JSX是React的核心组成部分,它使用xml标记的方式去直接声明界面,和html、js混写;react的核心是组件,将数据和逻辑进行封装。提高了代码复用率,降低了代码维护的难度。

react具有以下几点优势:

1.声明式设计:React 采用声明范式,可以轻松描述应用。

2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。

3.灵活:React可以与已知的库或框架很好地配合。

4.使用JSX语法:JSX是JavaScript语法的扩展,可以极大地提高JS运行效率。

5.组件复用:通过React构建组件使得代码易于复用,可在大型项目应用开发中发挥优势。

6.单向响应的数据流:React实现了单向响应的数据流,减少了重复代码,比传统数据绑定方式更简单。

create-react-app构建开发环境

create-react-app 来自于Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。

使用npm i 命令安装

npm i -g create-react-app

创建项目

create-react-app my-app

使用cd进入项目所在目录

cd my-app

最后启动项目

npm start
react的一些注意事项

React会将以小写字母开头的组件视为原生 DOM 标签。所以在创建React组件的时候,首字母必须要大写,否则会出错

新建的React组件,必须先引入react包,否则会报错

使用class关键字创建组件的注意事项:

①class类必须继承自React.Component类,

②在组件内部必须有一个render函数 返回值为jsx的虚拟dom结构

③必须使用export default暴露一下此先声明的类

④在class组件中如果要使用外接传递过来的参数,不需要接收,直接可以使用 this.props来使用

合理运用展开运算符 (...) ,可以节省很大的代码开销...

因为我自身对react也不够了解,还是得在日后进行更系统的学习后补充,这里就不再过多编写了,暑假还剩最后几天,在多学的同时也要注意以往知识的回顾