基础
React是用于构建用户的JS库(Facebook开源)
使用JS进行操作DOM会进行大量的重绘重排列
React采用组件化模式、声明式编码提高开发效率及组件复用率
React使用虚拟DOM和Diffing算法,减少与真实DOM的交互
Diffing算法:当浏览器进行更新时会和旧虚拟Dom进行匹配,当匹配到相同的虚拟Dom时不进行更新,只更新匹配不到(新的)的虚拟Dom
Recact使用jsx语法声明元素
基本的React使用(后期可用React脚手架进行项目搭建,无需引入这些样式和声明)
1、创建一个容器,并引入react相关库文件
<div id="test"></div> <!-- 引入react核心库 --> <script src="./js/react.development.js"></script> <!-- 引入react-dom操作dom --> <script src="./js/react-dom.development.js"></script> <!-- 引入babel,将jsx转换为js --> <script src="./js/babel.min.js"></script>
<script type="text/babel">//此处一定要写babel,因为是jsx语法 // h1标签不能写引号,因为不是字符串,创建虚拟dom const VDOM = <h1>Hello,React</h1> ReactDOM.render(VDOM,document.getElementById('test')) </script>
虚拟DOM
虚拟dom本质是一个object对象(一般对象)
虚拟DOM比较“轻”,真实dom比较“重”,因为虚拟dom是react内部在使用,无需真实DOM那么多属性,但虚拟DOM会被React使用Diffing算法转换为真实DOM
虚拟DOM中key的作用
1) .简单的说:key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用。
2) .详细的说:当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】,
随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下
a. 旧虚拟DOM中找到与新虚拟DOM相同的key:
(1) .若虚拟DOM中内容没变,直接使用之前的真实DOM
(2) .若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
根据数据创建新的真实DOM,随后渲染到到页面
2.用ndex作为key可能会引发的问题:
1.若对数据进行:逆力添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==> 界而效果没问题,但效率低。
2 .如果结构中还包含输入类的DOM:
会产生错误DOM更新==> 界面有问题。
3 .注意:如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,
仅用于演染列表用f展示,使用index作为key是没有问题的。
3.开发中如何选择key?
1 .最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
2 .如果确定只是简单的展示数据,用index也是可以的。
JSX
全称JavaScript XML,本质上React的语法糖React.createElement(component, props, ...children),主要是用来简化创建虚拟DOM
可以使用大括号引入js表达式(js语句和js表达式不同,一个表达式会产生一个值,可以使用变量接收到,比如a,a+b,function,一个语句则是控制代码走向的,如if、for、swich)
如果需要指定样式要使用className
如果要使用内联样式要使用style={{key:value}}
const name = 'React' <h1>你好,我叫{name}</h1> // <h1>你好,我叫React</h1>
渲染List列表
const software = [ { id: 1, name: '淘宝' }, { id: 2, name: '京东' }, { id: 3, name: '拼多多' } ] function App() { return ( <div className="App"> <ul> { software.map(item => <li>{item.name}</li>) } </ul> </div> ) } export default Appt
条件渲染
const flag = true function App() { return ( <div className="App"> {flag ? '条件为真' : '条件为假} </div> ) } export default App
脚手架
脚手架是用来帮助程序员快速创建一个基于xxx库的模板项目
react提供了一个用于创建react项目的脚手架库: create-react-app
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
创建项目(npm)
第一步,全局安装:npm i -g create-react-app
第二步,切换到想创项目的目录,使用命令:create-react-app hello-react
第三步,进入项目文件夹:cd hello-react
第四步,启动项目:npm start/yarn start
创建项目(npx)
第一步,npx create-react-app 是固定命令,create-react-app
是React脚手架的名称
第二步,react-basic表示项目名称,可以自定义,保持语义化
第三步,npx 命令会帮助我们临时安装create-react-app包,然后初始化项目完成之后会自自动删掉,所以不需要全局安装create-react-app
组件
React内的组件分为函数式组件和类式组件
函数式组件
1、组件的名称必须首字母大写,react内部会根据这个来判断是组件还是普通的HTML标签
2、函数组件必须有返回值,表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null
3、组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容,对于函数组件来说,渲染的内容是函数的返回值就是对应的内容
4、使用函数名称作为组件标签名称,可以成对出现也可以自闭合
// 定义函数组件 function HelloFn () { return <div>这是我的第一个函数组件!</div> } // 定义类组件 function App () { return ( <div className="App"> {/* 渲染函数组件 可以使用自闭合标签渲染 */} <HelloFn /> <HelloFn></HelloFn> </div> ) } export default App
类的基本知识(类组件的前置知识)
class Person{ //构造器方法 constructor(name,age){ //此处的this指向类的实例对象 this.name=name this.age=age } //自定义的一般方法 //方法在类的原型对象上,供实例使用 speak(){ console.log(`我叫${this.name}`) } } const p1 = new Person('tom',18) console.log(p1) //创建一个student继承自person class Student extends Person{ //子类如果是继承自父类,那子类的构造器需要用super constructor(name,age,grade){ //用super调用父类的属性 super(name,age) this.grade=grade } //重写父类的方法 //方法在类的原型对象上,供实例使用 speak(){ console.log(`我叫${this.name},我在${this.grade}`) } } const s1 = new Stuent('xiao',20,'高一') console.log(s1) 子类可以调用父类的方法,也可以重写 s1.speak()
-
类中的构造器不是必须写的,要对实例进行一些初始化的操作,比如添加需要指定属性时
-
如果A类继承了B类,且A类中写了构造器,那么A类中的super必须要调用
-
类中的所有方法都是放在原型对象上的,供实例使用
类式组件
1、类名称也必须以大写字母开头
2、类组件应该继承 React.Component 父类,从而使用父类中提供的方法或属性
3、类组件必须提供 render 方法render 方法必须有返回值,表示该组件的 UI 结构
// 引入React import React from 'react' // 定义类组件 class HelloC extends React.Component { render () { return <div>这是我的第一个类组件!</div> } } function App () { return ( <div className="App"> {/* 渲染类组件 */} <HelloC /> <HelloC></HelloC> </div> ) } export default App
组件状态
React hook出来之前,函数式组件是没有自己的状态的
类式组件的三大属性--state
通过更新组件的状态来更新页面
class Counter extends React.Component { // 初始化状态 state = { count: 0 } render() { // 读取状态 return <button>计数器{this.state.count}</button> } }
注意:state的状态不能直接更改,需要借助API-setState修改
class Counter extends React.Component { // 定义数据 state = { count: 0 } // 定义修改数据的方法 setCount = () => { this.setState({ count: this.state.count + 1 }) } // 使用数据 并绑定事件 render () { return <button onClick={this.setCount}>{this.state.count}</button> } }
类式组件的三大属性--props(父子传值)
props主要通过标签属性从组件外向组件内传递数据
props是只读的,不能直接修改
父传子
import React from 'react' // 函数式子组件 function FSon(props) { console.log(props) return ( <div> 子组件1 {props.msg} </div> ) } // 类子组件 class CSon extends React.Component { render() { return ( <div> 子组件2 {this.props.msg} </div> ) } } // 父组件 class App extends React.Component { state = { message: 'this is message' } render() { return ( <div> <div>父组件</div> <FSon msg={this.state.message} /> <CSon msg={this.state.message} /> </div> ) } } export default App
子传父
import React from 'react' // 子组件 function Son(props) { function handleClick() { // 调用父组件传递过来的回调函数 并注入参数 props.changeMsg('this is newMessage') } return ( <div> {props.msg} <button onClick={handleClick}>change</button> </div> ) } class App extends React.Component { state = { message: 'this is message' } // 提供回调函数 changeMessage = (newMsg) => { console.log('子组件传过来的数据:',newMsg) this.setState({ message: newMsg }) } render() { return ( <div> <div>父组件</div> <Son msg={this.state.message} // 传递给子组件 changeMsg={this.changeMessage} /> </div> ) } } export default App
使用propTypes可以对属性进行规则限制
import PropTypes from 'prop-types' const List = props => { const arr = props.colors const lis = arr.map((item, index) => <li key={index}>{item.name}</li>) return <ul>{lis}</ul> } List.propTypes = { colors: PropTypes.array }
props和state的区别
props(“properties” 的缩写)和 state 都是普通的 JavaScript 对象。
它们都是用来保存信息的,这些信息可以控制组件的渲染输出。
它们的一个重要的不同点就是:props 是传递给组件的(类似于函数的形参),而 state 是在组件内被组件自己管理的(类似于在一个函数内声明的变量)。
类式组件的三大属性--refs
使用React处理表单元素,一般有两种方式:
- 受控组件 (推荐使用)
- 非受控组件 (了解)
受控组件
import React from 'react' class InputComponent extends React.Component { // 声明组件状态 state = { message: 'this is message', } // 声明事件回调函数 changeHandler = (e) => { this.setState({ message: e.target.value }) } render () { return ( <div> {/* 绑定value 绑定事件*/} <input value={this.state.message} onChange={this.changeHandler} /> </div> ) } } function App () { return ( <div className="App"> <InputComponent /> </div> ) } export default Appf
非受控组件 -- 通过ref获取dom的值
import React, { createRef } from 'react' class InputComponent extends React.Component { // 使用createRef产生一个存放dom的对象容器 msgRef = createRef() changeHandler = () => { console.log(this.msgRef.current.value) } render() { return ( <div> {/* ref绑定 获取真实dom */} <input ref={this.msgRef} /> <button onClick={this.changeHandler}>click</button> </div> ) } } function App () { return ( <div className="App"> <InputComponent /> </div> ) } export default Appref通过手动操作dom的方式获取文本框的值,文本框的状态不受react组件的state中的状态控制,直接通过原生dom获取输入框的值
不要过度使用ref,如果发生事件的元素是触发事件的元素,即可以使用event.target操作元素
比如是失去焦点获取输入框的值,通过event.target可以得到发生事件的DOM元素对象
生命周期
生命周期的三个阶段(旧)-- 了解即可
初始化阶段由ReactDOM.render()触发---初次渲染
-
constructor()
-
componentWillMount() // 不常用
-
render()
-
componentDidMount()
更新阶段由组件内部this.setSate()或父组件重新render触发
-
shouldComponentUpdate() // 不常用
-
componentWillUpdate() // 不常用
-
render()
-
componentDidUpdate()
卸载组件 由ReactDOM.unmountComponentAtNode()触发
-
componentWillUnmount()
生命周期的三个阶段(新)
初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.getDerivedStateFromProps() // 允许组件从props获取参数并给state赋值
3.render() // 初始化会调用且每次更新都会调用
4.componentDidMount() // 通常用来开启定时器、发送ajax请求,订阅消息等
更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.getDerivedStateFromProps()
2.shouldComponentUpdate() // 不常用
3.render() // 每次更新都会调用
4.getSnapshotBeforeUpdate() // 获取更新前的属性
5.componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount() // 通常用来来关闭定时器、取消订阅
即将废弃的钩子
1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate
Hooks基础
ajax
ajax跨域代理
方法一
在package.json中追加如下配置
"proxy":"http://localhost:5000"
说明:
-
优点:配置简单,前端请求资源时可以不加任何前缀。
-
缺点:不能配置多个代理。
-
工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
方法二
第一步:创建代理配置文件 在src下创建配置文件:src/setupProxy.js 编写setupProxy.js配置具体代理规则: const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址) changeOrigin: true, //控制服务器接收到的请求头中host字段的值 /* changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000 changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000 changeOrigin默认值为false,但我们一般将changeOrigin值设为true */ pathRewrite: {'^/api1': ''} //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置),将api1替换为空 }), proxy('/api2', { target: 'http://localhost:5001', changeOrigin: true, pathRewrite: {'^/api2': ''} }) ) }
说明:
-
优点:可以配置多个代理,可以灵活的控制请求是否走代理。
-
缺点:配置繁琐,前端请求资源时必须加前缀。
fetch-除xhr外的发送ajax请求的方式
jquery和axios都是基于xhr(XMLHttpRequest)发送ajax请求
fetch: 原生函数,不再使用XmlHttpRequest对象提交ajax请求
注意:老版本浏览器可能不支持
Get请求:
fetch(url).then(function(response) { return response.json() }).then(function(data) { console.log(data) }).catch(function(e) { console.log(e) });
Post请求
fetch(url, { method: "POST", body: JSON.stringify(data), }).then(function(data) { console.log(data) }).catch(function(e) { console.log(e) })
路由
基础
一个路由就是一个映射关系(key:value)
key为路径, value可能是function(后端路由,当前端请求时返回函数调用的结果)或component(前端路由)
后端路由
1) 理解: value是function, 用来处理客户端提交的请求。
2) 注册路由: router.get(path, function(req, res))
3) 工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由
1) 浏览器端路由,value是component,用于展示页面内容。
2) 注册路由: <Route path="/test" component={Test}>
3) 工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
React路由
插件库:react-router-dom
Link
导航区的a标签改为Link标签
<Link to="/home">Home</Link>
Route
展示区的Route进行路径与组件匹配
<Route path='/home' component={Home}/>
BrowserRouter和HashRouter
在index的APP外包裹<BrowserRouter>
或<HashRouter>
区别
1.底层原理不一样:
BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如:localhost:3000/demo/test
HashRouter的路径包含#,例如:localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响,因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失!!!
4.备注:HashRouter可以用于解决一些路径错误相关的问题。
NavLink
NavLink是Link标签的升级版,如果被点击时想添加属性可以使用activeClassName="属性名"
<NavLink activeClassName="backColor" to="/about">About</NavLink>
对NavLink进行封装,标签体的内容会通过props属性的children传递给子组件,所以可以直接结构赋值出所有的props
import React, { Component } from 'react' import { NavLink } from 'react-router-dom' export default class index extends Component { render() { // 封装NavLink,backColor是自定义的选中样式 return ( <NavLink activeClassName='backColor' {...this.props} />) } }
Swich
Swich标签可以进行单一匹配,如果两个路由的地址相同但组件不同,默认会展示两个组件
使用swich可以避免展示两个组件,匹配到第一个就不继续进行匹配
Redirect
一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由
<Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Redirect to="/about"/> </Switch>
路由样式丢失
在public的index.html中可能会引入外部样式,因为路由的原因导致样式丢失
解决方法:
1.public/index.html 中 引入样式时不写 ./ 写 / (常用)
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)
3.使用HashRouter代替BrowserRouter(少用)
路由模糊匹配与精准匹配
路由的匹配规则默认为模糊匹配
开启精准匹配<Route exact={true} path="/about" component={About}/>
可以简写<Route exact path="/about" component={About}/>
注意:严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
嵌套多级路由
多级路由需要加上父路由的path值
路由传参
1.params参数
路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/>
接收参数:this.props.match.params
2.search参数
路由链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
接收参数:this.props.location.search
备注:获取到的search是urlencoded编码字符串,需要借助querystring的parse方法解析
3.state参数
路由链接(携带参数):<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>
接收参数:this.props.location.state
备注:刷新也可以保留住参数
编程式路由导航
可以在不借助Link和NavLink的情况下进行导航的跳转
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
this.prosp.history.push(要去往的路由)
this.prosp.history.replace(要取代的路由,不留下历史记录)
this.prosp.history.goBack()后退一步
this.prosp.history.goForward()前进一步
this.prosp.history.go(n)后退或前进n步,n为负值是后退
withRouter
路由组件有自带的三个props属性,而如果是自己用标签注册的组件则没有props属性
-
history
-
location
-
match
如果一般组件也想使用路由组件的特有API可以使用withRouter
导入withRouter,并在导出组件时使用withRouter(组件名)方法导出,返回一个新组件
import {withRouter} from 'react-router-dom' export default withRouter(组件名)标签:react,DOM,React,props,组件,路由 From: https://www.cnblogs.com/JC30705/p/16879664.html