React(2)

一、Web项目的架构类型

1. 1991年之后：纯静态页面阶段 —— 内容永远不变
2. 1994年左右：动态网页阶段/前后端代码混杂一起 —— 不同人不同时间访问其内容可能改变，ASPX/PHP/JSP，不足：代码的可读性可维护性差
3. 1998年左右：AJAX阶段/前后端不分离 —— 静态内容和动态内容分处于不同的页面中（仍然运行于同一个服务器中），静态内容加载完成再使用XHR等技术异步请求动态内容
4. 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
使用方法：

1. 下载必需的第三方模块文件
   npm i react-router-dom
   提示：下载得到的最新版是V6.4，与上一周的内容不一样
2. 修改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}/> )
   

3. 实现页面跳转的两种方式：
   模板法： <Link to="跳转地址"></Link>
   脚本法：useNavigate( )
4. 如何获取当前页面的路由地址：

   let loc = useLocation( )     
    //{ pathname: 路由地址,  search: 查询字符串 }
   

5. 如何读取路由参数（即路由地址中的查询字符串数据）

   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实现的具体技术有哪些？

1. XHR —— 浏览器兼容性好；麻烦，基于回调
2. jQuery.ajax( ) —— 底层就是XHR；基于回调
3. axios —— 第三方工具，底层就是XHR；基于Promise
4. wx.request( )/uni.request( ) —— 用于专有平台
5. fetch —— H5标准技术，用于取代XHR；功能强大，且基于Promise

React小知识：在JSX里如何创建一个不生成任何HTML元素的父元素？

Vue.js中：
方法① <template></template>
方法② <block></block>

React中：
方法① <></>
方法② <React.Fragment></React.Fragment> 片段

JSX小知识：如何在JSX中添加注释？

{ /*  JSX注释  */ }
{ 
  // JSX注释  
}