Skip to main content

React 介绍

【面试的时候,可能会问到】

  1. react 是干什么的?

构建用户界面的javascript库。

  1. react 能干什么?

开发网站,单页面应用,手机 app

vuereact 几乎在使用上和原理上非常的相似,vue 最初就是借鉴的 react 思想开发的

  • react 好处:

api 非常少,使用起来很简单,灵活。

react 函数式编程思想(声明式编程)

react 原理#

vue 单向数据流 != 数据单向绑定

他和 vue 不同的地方:数据单向绑定的

  • 【数据流例子说明:】

父组件 变量 传递给 子组件 子组件可以修改传递过来的变量吗?不可以,为什么,因为数据流是单向的,也就是说从父级传递过来的数据,子组件只能用,不能改。

  • react【数据单向绑定】

也就是说,他不能自动的监听到数据的变化,不能自动实现 vue 中数据双向绑定 我们在 react 中要实现双向绑定,需要手动的设置 setState.

  1. 数据单向绑定

  2. 数据流--单向数据流

  3. 基于函数和类运作的【函数组件和类组件】

官网的阅读【自学】#

  1. 中文官网英文官网

  2. 文档 --> 核心概念【初级的基础知识】-->高级指引【中级】 -->HOOK【高级用法】

函数组件&基本布局#

函数组件:就是一个函数返回一段 dom 片段

模块化开发【面试题】#

  • 好处:解耦,便于维护和开发
  • 复用:哪儿用就给它引入到哪儿

react 里,样式是没有作用域控制的#

也就是说,你在任何地方写的样式都会影响到全局样式

  • 所以样式类名需要额外的注意
  • jsincss 【这是一种解决方案】 module.css 【官方配置好的一种解决方案】 scsscss预处理器,利用嵌套的语法避免冲突】

创建 react 项目#

  1. 创建项目前

如果你电脑上安装过 create-react-app 脚手架 需要卸载(新版本换了创建命令)

npm unistall -g create-react-app
  1. 创建项目命令
npx create-react-app myappname

【myappname】:项目名称,不可以叫 react等(关键字) 也不许有驼峰命名

  • npx

npx 是运行本地 node_modules 包里依赖的,如果没找到,就临时下载,使用完之后把下载的依赖删掉,用 npx 好处是保证了依赖版本的新鲜度【每次都是最新版本】,npm 先运行本地项目,如果没找到去本机全局里找

另一种创建(eject)

npx create-react-app myappname
git add --all
git commit -m 'sss'
yarn eject
yarn//或npm i // 安装依赖(感觉此项多余)

安装scss

yarn add node-sass-chokidar
yarn add npm-run-all

修改package.json

 "scripts": {    "build-css": "node-sass-chokidar src/ -o src/",    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",    "start-js": "node scripts/start.js",    "start": "npm-run-all -p watch-css start-js",    "build-js": "node scripts/build.js",    "build": "npm-run-all build-css build-js",    "test": "node scripts/test.js --env=jsdom"  },

项目结构#

Project  ├─── node_modules  ├─── public  │      ├── favicom.ico  │      ├── index.html  │      └── ...  ├─── src  │      ├── index.js  │      ├── components  │      └── ...  ├─── .gitignore  ├─── package.json  └─── README.md
  • node_modules:项目依赖包。它是我们项目启动时所需要运行的依赖

  • public :静态资源。是我们 html 模板所在的公共文件夹,如果你在 public 里面放了一个静态资源【css 文件,js 文件,图片,字体】,那么当打包的时候,这些文件不会被编译;

    • favicom.ico:网站标题的图标;
    • index.html:渲染的根页面(root);
  • .gitignore:git时忽略的文件。是一份告诉 git 提交的筛选名单,里面的/node_modules 就是告诉 git 存代码的时候把node_modules 目录过滤掉,并不提交到github.

  • package.json :是 node_modules 包依赖的清单目录,也就是说我 npm 安装的所有的依赖名字都会写入到 package.json 里去;还有它包含我们启动项目的脚本(scitpts里面的内容),打包项目等命令所在文件。package.json的作用:依赖的清单,命令的运行

    • scripts里,有个eject 命令,是为了讲打包配置暴露到项目里的(会在项目根目录里创建一个config文件夹),但是运行eject命令是不可逆的,慎用,我们可以用customize-cra第三方工具库
  • README.md 项目说明文档,不要删除,为什么?因为在 GitHub 里开启静态服务也没,如果没有这个文件,你开启是不会成功的,而且,GitHub 他也不会提示你缺这个文件,所以比较坑,一定不要删除

  • src 是我们开发的源码所在文件夹 【最重要的:/src

    1. .svg 矢量图:不会失真,但是色彩值对比 jpg 少,色彩不是很丰富
    2. .svg 我们前端完全可以手写出来。当然没人那么做,都是用软件生成,比如 ps
    3. serviceWorker.js 做离线缓存的,【离线==断网】在断网的情况下,我们的页面还是可以正常打开和访问的,不会出现 404,只是 ajax 功能失效。
    4. src 下默认的哪些可以删:除了 index.js(入口文件是src/index.js) 其他的都可以删。
    • 为什么删?

      因为我们要重构自己的项目结构在公司里开发项目,是有一个项目结构开发规范。

目录功能
/src/项目主目录
/view存放我们页面级的组件
/componentsviwe 组件里公用的一些弹窗之类的
/api把整个项目里所有的 ajax 请求写在这
/tools转化时间,分割数组,功能性纯 js 文件
/assets静态资源
/index.js入口文件 位置不可变,必须的

运行项目#

  1. 启动本地项目开发环境
npm run start  或 yarn start
  1. 打包 src 源码,变成原始的 jshtml
npm run build

还是需要使用服务端启动,如下:

npm install -g serveserve -s build
  1. 释放我们项目官方配置文件,且该命令只能运行这一次,操作不可逆。
npm run eject

npm run eject 一般是用不到的,官网提供了自定义配置接口,如果想改变项目里的官方配置,需要释放配置,再运行这个命令

  • 【坑】 npm run eject 我们创建项目的时候,官方会给初始化一个 git 仓库,这时候使用的时候要先把代码提交到 git 里或者,把 git 仓库删掉,react 才会区分出来这个组件是原生标签还是自定义的
注意

当我们拿到一个项目,一般来说都不会给你项目里带着 node_modules 包的,那就需要我们自己安装所有依赖。

  • 想要运行项目需要先执行以下命令:
npm install 或者 yarn

当使用 npm 命令的时候,npm 就会读取 package.json,然后会把你依赖清单里的名字全部下载下来。

组件传值#

  1. 父传子:props
  2. 子传父:调用父组件的函数
  3. 跨级:context redux

其他#

react引入的库

// renderreact-dom//  路由react-route-domreact-route// reduxreact-Reduxredux