React(2)
一、Web项目的架构类型
- 1991年之后：纯静态页面阶段 —— 内容永远不变
- 1994年左右：动态网页阶段/前后端代码混杂一起 —— 不同人不同时间访问其内容可能改变，ASPX/PHP/JSP，不足：代码的可读性可维护性差
- 1998年左右：AJAX阶段/前后端不分离 —— 静态内容和动态内容分处于不同的页面中（仍然运行于同一个服务器中），静态内容加载完成再使用XHR等技术异步请求动态内容
- 2010年左右：前后端分离阶段 —— 静态内容和动态内容分处于不同的服务器中，优势：便于独立的开发/调试/维护，性能优异；不足：天然伴随着“跨域问题”
二、项目：净美仕企业门户
项目背景：2013年，净美仕的企业门户，基本功能参见 www.codeboy.com:9999/mfresh/
早期技术选型：采用的“前后端不分离”的技术方案 —— 静态文件(.html)和动态文件(.php)共处于同一个Web服务器中，目前看来已经略显过时了，性能不足，PHP已经处于消亡的边缘。
项目重构：采用的“前后端分离”的技术架构 —— 静态文件(.html)运行于的Apache或Nginx服务器，后端接口(.php或.node或.java)用对应的后端服务器。技术选型：
后台接口：暂时先用之前的.php接口，后期改写为.node+express编写RESTful API
前端界面：React + React-Router-Dom + fetch + 自定义组件库
======================
面试题：React项目中放置图片的目录有两个，二者的区别是什么？：
public：静态资源托管目录，不会被Webpack打包处理，而是直接发布到服务器中，客户端浏览器可以直接使用文件路径来访问 —— 用于放置项目中的动态图片，例如：用户头像、商品评论图片…
src：源代码目录，里面的文件只有被Webpack打包后(必须被其它模块依赖)才能发布到服务器中，否则外界无法访问 —— 用于放置项目中的静态图片，例如：logo、各种小图标…
三、React中的路由导航模块
Vue.js中的路由导航模块：Vue-Router
小程序中的路由导航： pages.json + 五种跳转API
uni-app中的路由导航： pages.json + 五种跳转API
React中的路由导航模块：
基于浏览器的项目（网站/H5等）： react-router-dom
脱离浏览器的项目（ReactNative）： react-navigation
React中基于浏览器的项目，实现SPA应用必需的路由导航模块：react-router-dom
官网手册： https://reactrouter.com/en/main/start/tutorial
使用方法：
- 下载必需的第三方模块文件
npm i react-router-dom
提示：下载得到的最新版是V6.4，与上一周的内容不一样 - 修改index.js，使用Router代替App组件
import {RouterProvider, createBrowserRouter } from 'react-router-dom' let r = createBrowserRouter([ {path: '/login', element: <Login/> }, {path: '/regiseter', element: <Register/>}, ....... {path: '/*", element: <NotFound/>} ]) let root = ReactDOM.createRoot(document.getElementById('root')) root.render( <RouterProvider router={r}/> ) - 实现页面跳转的两种方式：
模板法：<Link to="跳转地址"></Link>
脚本法：useNavigate( ) - 如何获取当前页面的路由地址：
let loc = useLocation( ) //{ pathname: 路由地址, search: 查询字符串 } - 如何读取路由参数（即路由地址中的查询字符串数据）
let x = useSearchParams( )
四、React中的接口异步请求
React官方没有提供异步数据请求方案；可以使用现有的已知的任何技术；官方示例使用的是fetch。
fetch：抓取，用于客户端浏览器抓取服务器端接口数据；是W3C委员会为HTML5新增的异步请求技术，目的在于“取代XHR”。
使用手册: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
使用fetch发起GET请求—Promise
let url = 'http://www.codeboy.com:9999/news?nid=2'
//异步请求服务器端接口数据，返回一个Promise
let promise1 = fetch( url )
promise1.then(res=>{ //res: response，响应消息对象
//clg(res.status) 响应状态码
//clg(res.headers) 响应消息头部
//clg(res.body) 响应消息主体(ReadableStream)
//如果开发者确认服务器返回的主体是JSON字符串的话，使用JSON.parse()方法对主体进行解析即可
let promise2 = res.json( ) //读取响应消息主体，完成后进行JSON解析
promise2.then(data=>clg(data)).catch(err=>clg(err))
}).catch(err=>clg(err))
使用fetch发起GET请求—await(推荐使用)
let url = 'http://www.codeboy.com:9999/news?nid=2'
//异步请求服务器端接口数据，返回一个Promise
let res = await fetch( url )
let data = await res.json( ) //读取响应消息主体，完成后进行JSON解析
clg(data)
使用fetch发起POST请求—await（推荐使用）
let url = 'http://www.codeboy.com:9999/login'
let options = {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'uname=yaya&upwd=123'
}
//异步请求服务器端接口数据，返回一个Promise
let res = await fetch( url, options )
let data = await res.json( ) //读取响应消息主体，完成后进行JSON解析
clg(data)
七、React中的“父子组件间传参”
父组件的数据传递给子组件 —— Props Down
//父组件（Parent.js）
function Parent(){
let [newsList] = useState([....])
return <Child list={newsList} />
}
-----------
//子组件（Child.js）
function Child( props ){
clg( props.list ) //值就是父组件中的newsList
}
子组件的数据传递给父组件 —— Props Up
//父组件（Parent.js）
function Parent(){
function showPage( n ){ //clg(n) }
return <Child f2={showPage}/>
}
-----------
//子组件（Child.js）
function Child( props ){
let num = 3 //要传递给父组件的数据
props.f2( num ) //在子组件体内调用父组件的方法，实参是子组件的数据
}
八、内容绑定中“innerText”和“innerHTML”
| Vue.js | 小程序/uni-app | React | |
|---|---|---|---|
| innerText绑定 | <div v-text="表达式"></div> | <div>{{表达式}}</div> | <div>{表达式}</div> |
| innerHTML绑定 | <div v-html="表达式"></div> | <rich-text :nodes={表达式}></rich-text> | <div dangerouslySetInnerHTML={ {__html:表达式} }></div> //React提供的“友好提示”：innerHTML绑定的内容一定要安全 |
**拓展
AJAX实现的具体技术有哪些？
- XHR —— 浏览器兼容性好；麻烦，基于回调
- jQuery.ajax( ) —— 底层就是XHR；基于回调
- axios —— 第三方工具，底层就是XHR；基于Promise
- wx.request( )/uni.request( ) —— 用于专有平台
- fetch —— H5标准技术，用于取代XHR；功能强大，且基于Promise
React小知识：在JSX里如何创建一个不生成任何HTML元素的父元素？
Vue.js中：
方法① <template></template>
方法② <block></block>
React中：
方法① <></>
方法② <React.Fragment></React.Fragment> 片段
JSX小知识：如何在JSX中添加注释？
{ /* JSX注释 */ }
{
// JSX注释
}