react第一天

最新推荐文章于 2024-09-26 07:41:39 发布

小余童鞋11

最新推荐文章于 2024-09-26 07:41:39 发布

阅读量202

点赞数

文章标签： react

本文链接：https://blog.csdn.net/Little_Fishs/article/details/104957906

版权

回顾Vue

基本指令
表单的输入
computed计算属性
watch监听
修饰符
过滤器
生命周期
动画（过渡动画）
组件（基本组件=>组件嵌套=>组件通信）
vue-cli脚手架
路由（基本路由=>路由嵌套=>动态路由=>编程式导航=>路由模式=>name、alias=>导航守卫=>滚动行为）
ref属性（快速定位DOM节点、可以实现组件传值）
is
vuex状态管理（state、action、mutation、getter、module）
axios（基本promise）get/post
axios拦截器（请求拦截、响应拦截）
权限的概念
网易云（从头到尾从播放到歌词）
美团案例（简易）
后台管理项目（从后端接口一直搭建到PC端）
洋店网（电商项目）
UI框架（elementUI,swiper,mintUI,vantUI）
自定义指令
动态样式

（react 入门第一天）

0.react并不是一个框架，它只是一个库

1.react 介绍

React 是Facebook内部的一个JavaScript类库。
React 可用于创建Web用户交互界面。
React不是一个完整的MVC框架,最多可以认为是MVC中的V（View）,甚至React并不非常认可MVC开发模式。
React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。
React 引入了虚拟DOM（Virtual DOM）的机制。
React 引入了组件化的思想。
React 使用Facebook专门为其开发的一套语法糖–JSX（语法糖）。

2.特点

虚拟DOM
组件化
JSX语法

3.优缺点

优点

组件化开发
引入虚拟DOM,性能好,响应速度快
JSX语法
单向数据绑定 Data Flow
跨浏览器兼容
完善的生态圈和活跃的社区

缺点

不是完整MVC框架
不适用于复杂的大型应用

4.脚手架与非脚手架安装

概念

用于构建用户界面的 JavaScript 库

官网地址

https://react.docschina.org/

非脚手架(CDN方式)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
react核心库
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
react-dom库
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
babel解析
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

脚手架安装

1、npm install(i) create-react-app -g 全局安装react环境（装一次即可 3.4版本）
2、create-react-app demo （创建项目, demo是项目名称）
3、cd demo(进入项目中)
4、npm start (启动)

demo
├── README.md 阅读指南
├── node_modules 第三方依赖
├── package.json 配置文件
├── .gitignore git忽略文件
├── public 公共文件夹
│ ├── favicon.ico 收藏夹图表（如果你自己要替换，记得清空浏览器缓存）
│ ├── index.html 单页应用中唯一的html
│ └── manifest.json 样式配置
└── src
├── App.css 根组件css文件
├── App.js 根组件js文件
├── App.test.js 测试文件
├── index.css 全局css文件
├── index.js 唯一的js文件
├── logo.svg 初始化的svg
└── serviceWorker.js 服务工作站的配置文件

5.jsx

1.JSX语法遇到 < 就按HTML语法解析,遇到{ 就按JavaScript语法解析
2.使用三元表达式
3.使用函数表达式
4.JSX 标签可以相互嵌套
5.注意换行和缩进,增强代码的可读性,建议使用小括号括上 JSX 代码,防止分号自动插入的bug（关闭vscode中的自动保存自动格式化代码）
6.属性绑定
7.style属性的值必须是一个对象
8.绑定class类名,必须使用className,不能使用class
9.注释 {/* <Index /> */}

6.在脚手架中重写src目录

创建src

创建assets静态资源文件夹
创建components组件文件夹
创建index.js

//第一步引入核心库
import React from 'react'
//第二步引入React-dom库
import ReactDOM from 'react-dom'
//引入css文件
import './index.css'
//引入根组件
import App from './app'
//第三步渲染根组件
ReactDOM.render(<App/>,document.getElementById('root'))

创建index.css(这个文件可写可不写，内容可以写重置样式也可空着，这是全局的css)
创建一个app.js

//创建一个唯一根组件
//第一步 引入核心库
import React from 'react'
//第二步 创建一个函数
function App(){
    return (
        <div>
            <h1>我觉得脚手架好好用啊！！！</h1>
        </div>
    )
}
//第三步 暴露组件
export default App

创建了一个app.css

初始化以上文件之后，记得重启当前服务器

7.在React中创建组件的方式

组件名称被当做标签被渲染的时候首字母必须大写

方式一函数创建方式

import React from 'react'
function App(){
    return(
        <div>
        内容
        </div>
    )
}
export default App

方式二类的创建方式

//import React from 'react'
//class App extends React.Component{}
import React,{Component} from 'react'
class App extends Component{
    render(){
        return(
            <div>
            内容
            </div>
        )
    }
}
export default App

8.vscode中支持jsx语法

首选项=>设置=>emmet=>setting.json

"emmet.includeLanguages": {
"javascript":"javascriptreact",
},

记得重启下

面试题

1.React有哪些优缺点？

2.React解决了什么问题？
答案：
组件化：这是react的核心
开发效率：react代码基本就是组件的组合，只用关心一个render函数，不用关心视图局部的修改
运行效率：react实现了虚拟dom,相比于其他框架具有更优的效率
可维护性：react基于flux或者redux的架构设计，确定定的store很容易定位问题

3.React、vue、angular有什么区别？
答案：开发者数据绑定依赖标准渲染页面模式
vue 尤雨溪双向数据绑定 ES5/es6 模板+脚本+样式 MVVM
react FaceBook 单向数据绑定 es6 JSX 不是MVVM
angular 谷歌双向数据绑定 typescript 模板 MVC(1)/MVVM(2…)