React如何快速上手

一、React概述

英文官网：https://reactjs.org/

中文网站：https://react.docschina.org/

用于构建用户界面的 JavaScript 库（React只涉及JS，不涉及HTML/CSS），由Facebook在2013年5月开源，目前最新稳定版是v17.0.2。

项目中使用React的两种方式：

①脚本引入式——简单直接，一般用于小型页面

②脚手架方式——适合于真正的大型项目开发

二、JSX

JSX：JavaScript XML，使用XML语法创建JS对象的技术，等价于React.createElement() —— 本身是一种JS的语法变种，浏览器无法直接执行，必需Babel编译器的转化。

语法要求如下：

①一段JSX可以用( )括起来，也可以不用 —— 推荐使用

②JSX采用严格的XML语法：一段JSX有且只有一个根标签

③JSX中所有的HTML标签都是一个变量名——这类变量名只允许用纯小写形式

④用户自定义组件名对应的标签必须以大写字母开头

⑤标签的属性必须使用单引号或双引号括起来

⑥一些特殊的属性名必须加以修改，例如： class变为className

⑦JSX中“拼接”变量——本质是“数据绑定”，内容绑定和属性绑定语法完全一样

⑧JSX对象的样式绑定分为两种：

className：绑定为一个字符串即可

style：不能赋值为字符串，必须绑定为一个“样式对象”，形如：{color:'red', backgroundColor: '#fff'}

⑨JSX可以绑定原生DOM事件，但是必须改为“小驼峰命名法”，并且赋值时必须绑定为函数

⑩JSX中可以声明注释，写法：{/* 注释内容 */}

三、React中自定义组件

React中提供了两种创建自定义组件的语法：

语法1：函数式组件

function 组件名( ){

return (JSX)

}

let el = (<组件名></组件名>)

语法2：class式组件

class 组件名 extends React.Component {

render(){

return (JSX)

}

let el = (<组件名></组件名>)

一、React项目脚手架

Vue.js为了方便开发者使用Vue.js的全部特性，提供了一个Vue-CLI工具，用于创建脚手架项目；

React为了方便开发者使用React的全部特性，提供了一个create-react-app工具，用于创建脚手架项目；

使用方法：

①确保Node >= 14.0.0 和 npm >= 5.6， NPM仓库建议使用淘宝或华为的镜像

node -v

npm -v

npm config get registry

②下载/安装Windows全局命令：

npm i -g create-react-app

npm下载的全局命令默认保存在 c:/User/用户名/AppData/Roaming/npm

③使用全局命令在当前目录下创建脚手架项目：

create-react-app 项目名

注意：项目名不允许包含大写字母

⑤启动项目自带的开发服务器：

npm start

注意：Windows10开始，命令行界面中只要点击了鼠标左键，就会锁定当前界面不往下执行！！！

解决方法：点击一下鼠标右键，取消命令行界面锁定。

如果从NPM默认的官方仓库中下载第三方工具模块速度较慢或下载过程总提示错误，请修改下载仓库：

默认仓库：https://registry.npmjs.org/

建议修改为淘宝仓库：https://registry.npmmirror.com/

也可修改为华为仓库：https://repo.huaweicloud.com/repository/npm/

查看当前仓库地址： npm config get registry

修改当前仓库地址： npm config set registry 仓库地址

二、：如何解决React事件监听函数中this指向丢失问题？

看之前发的文章

三、React中的条件渲染

Vue.js中使用v-if / v-else 实现模板中的条件渲染；

小程序中使用 wx:if / wx:else 实现模板中的条件渲染；

React中没有指令概念 —— 只有JS：

f1( ){

if( ){ return (JSX) }

else { return (JSX) }

}

render(){

return (

)

}

四、React中的列表渲染

Vue.js中使用v-for 实现模板中的列表项循环渲染；

小程序中使用 wx:for 实现模板中的列表项循环渲染；

React中没有指令系统 —— 只有JS：

f2(){ //把原始数组转化为一个JSX数据

let newList = [ ]

for(let i=0; i<老数组的长度; i++){

newList.push( JSX )

}

return newList

}

render(){

return ( <div>{this.f2()}</div> )

}

三、受控组件和非受控组件

Vue.js中有v-model指令实现“双向数据绑定”：

方向1：Model Data 绑定到 Template View

方向2：Template View 绑定到 Model Data

React中没有模板，没有指令，没有“双向数据绑定”概念。类似概念的解决方案：

解决方案1：受控组件

表单元素value绑定到model，只有model改变了表单元素才能改变（即用户的输入无效了）

Model：state = { uname: "" }

f1=(e)=>{

let uname = e.target.value

this.setState({uname})

}

JSX： <input value={this.state.uname} onChange={this.f1}/>

解决方案2：非受控组件——了解

myUnameRef = React.createRef( )

JSX：<input ref={this.myUnameRef} />

f3(){

let uname = this.myUnameRef.current.value

}

一、React应用中的服务器端数据请求方案

React官方没有提供任何的异步请求方案，可以任意选择XHR、或axios、或fetch。

fetch手册：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

使用fetch发起GET请求：

let url = '....'

fetch(url)

.then(res=>res.json( ))

.then(data=>console.log(data))

.catch(err=>console.log(err))

使用fetch发起POST请求：

let url = '....'

let options = {

method: 'POST',

headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

body: 'name=dang&pwd=123456'

}

fetch(url, options)

.then(res=>res.json( ))

.then(data=>console.log(data))

.catch(err=>console.log(err))

面试题：响应消息主体的常见内容类型有哪些？——非常多

text/html、

text/css、

appliction/javascript、

image/jpeg、

application/json

...

面试题：请求消息主体的常见内容类型有哪些？——只有四种

① text/plain

② application/x-www-form-urlencoded

③ multipart/form-data

④ application/json

二、组件的生命周期

Vue.js中组件的生命周期函数：

创建阶段：beforeCreate / created

挂载阶段：beforeMount / mounted

更新阶段：beforeUpdate / updated

销毁阶段：beforeDestroy / destroyed

微信小程序中组件的生命周期函数：

onLoad / onShow / onReady / onHide / onUnload

https://react.docschina.org/docs/react-component.html

React中组件的生命周期方法分为：

挂载阶段：

constructor()

render()

componentDidMount() 组件挂载完成

更新阶段：

shouldComponentUpdate() 应该让当前组件继续更新吗？

render()

componentDidUpdate() 组件完成更新

卸载阶段：

componentWillUnmount() 组件即将卸载

面向过程的编程 —— 项目由一个又一个的function组成 —— 198X

面向对象的编程 —— 项目由一个又一个的class组成 —— 199X

三、React中的Hook

React诞生初期（2013年中），class组件是主流，function组件比较少用——没有state和生命周期。

2018年，React V16.8诞生，React官方为function组件添加了很多强大的功能（例如：state和生命周期），所有class组件可以实现的功能function组件都可以实现了，且function组件中没有“恼人的this问题”——function组件逐渐成为主流。

React Hook：钩子，用于为函数式组件“勾住/添加”一些辅助功能 —— 不能用于class式组件。不论是官方提供的钩子，还是自定义的钩子，本质都是一个以“use”开头的函数

function组件声明state的语法 —— 使用 State Hook（useState）：状态钩子

let [ 状态变量名, 修改状态变量的方法 ] = useState(状态数据的初始值)

function组件声明生命周期的语法 —— 使用 Effect Hook（useEffect）：副作用钩子/辅助功能钩子

完成类组件中 componentDidMount 类似的功能：

useEffect( ( )=>{

//此处的内容就相当于"组件挂载完成"生命周期方法

}, [ ] )

完成类组件中 componentDidUpdate 类似的功能：

useEffect( ( )=>{

//此处的内容就相当于"组件更新完成"生命周期方法

}, [count, uname] )

完成类组件中 componentWillUnmount 类似的功能：

useEffect( ( )=>{

return ()=>{

//此处的内容就相当于"组件即将卸载"生命周期方法

}

}, [ ] )

React如何快速上手相关推荐

React+Webpack快速上手指南
2019独角兽企业重金招聘Python工程师标准>>> 前言这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两 ...
react native快速上手
本文以mac环境为例,快速搭建react执行环境: 前置条件: node xcode 我使用的环境为: $node -v v6.11.2 $xcodebuild -version Xcode 9.0 ...
react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
React 快速上手 - 目录索引
React 快速上手 - 目录索引 1~10 完整版因为一开始在 SF 上写文,后来尝试掘金 ,所有会有跨站地址,不要惊慌? ~~~ 对了点赞是美德 : ) 目录 01 前言 02 开发环境搭建 ...
react 引入html文件_React最快速上手教程
不使用webpack或其他任何编译打包工具,但使用React的JSX混合语法,直接在浏览器中运行React的元件component,十分钟最快速上手. image 为什么用React? 数据绑定假定我 ...
React 快速上手
React 快速上手开始开始一个React的项目. npx create-react-app my-app 注意:Node >= 8.10 和 npm >= 5.6,npx是 npm ...
WijmoJS 2019V1正式发布：全新的在线 Demo 系统，助您快速上手，开发无忧
2019独角兽企业重金招聘Python工程师标准>>> 下载WijmoJS 2019 v1 WijmoJS是为企业应用程序开发而推出的一系列包含HTML5和JavaScript的开发 ...
electron 渲染进程调用主进程_万物皆可快速上手之Electron(第一弹)
(给前端大全加星标,提升前端技能) 作者: 前端森林公号 / 前端森林 (本文来自作者投稿) 最近在开发一款桌面端应用,用到了Electron和React. React作为日常使用比较频繁的框架, ...

React如何快速上手

React如何快速上手相关推荐

最新文章

热门文章