react 特点

```javascript
react特点
1.react使用用来构建用户的javascript库facebook公司出品
2.组件单项数据
3.jsx语法：在js模拟dom节点，优化dom操作
4.虚拟dom：用js模拟edom
react安装
1全局安装脚手架 npm install create-react-app-g
2切换到根目录cd/
3项目 create-react-app 名字
react运行
1.切换到项目目录
cd 名字
2运行项目npm install antd --save
npm run start
3浏览器会自动打开
 vscode插件
1.Chinese中文界面
2.ESLint js语法检查
3.LiveServer本地服务器
4.Path itellisense智能路径提示
5.React-Native/React/Redux snippets for es6/es7
6.React语法提示
jsx
javascript xml扩展语言:方便在js中编辑htmI模板
特点

1.一个组件只能有一个根节点
2.0表达式，js代码编写
3./* */}注释
4. class用lassName表述
5.数据内容可以有html标签
6.条件渲染e
b&&并且运算符
a三目运算
7.列表渲染日{
     arr.mapl(iterm,index)=><div key-{
     index)>/item}</div>}

react组件创建 

1.函数无状态组件 函数《组件名)首字母大写
function ChildA(props)(
return (
<div><h3>函数组件</h3></div>
)
}
2. 有状态组件
import React,(Component) from 'reacr
导入react和组件方法
dlass ChildB extends Component (
constructor(props)(
super(props;
this.state- 0
renderOK
return (
<div><h3>类数组件</h3></div>
)
》
export default ChildB
导出ChildB

3.使用组件
01导入
import ChildB from '.components/ChildB.js'
02使用
<ChildB></ChildB>

react-props属性组件之间数据传递方式;
传递数据父组件。<ChildB num-{
     12)>
获取数据子组件。
{
     this. props.num}

组件嵌套
在子组件中通过this .props. children获取到所有的嵌套内容
item.type嵌套内容的标签名区分
item. props.name嵌套内容的属性名name来区分
过滤嵌套内容
区分e
{
     this. props.children&&this.props.children.fiter(item->
item. props.name-=="foot")}
当前嵌套内容属性名name值为foot的元素保留

state状态
初始化state状态。}
this.setState((num:10})
更新状态。把状态num 更新为10

props和State区别
1. props属性通常由父组件传递过来只读
2. state状态组件自身的数据，可以修改，修改state会触发视图更新.




什么是生命周期:当一个组件从创建初始化渲染更新卸载等一些过程我们称为组件的生命周期

在这些过程会执行一些回调函数，我们称为组件的生命周期钩子函数

三大阶段01挂载阶段02更新03卸载
组件的生命周期
定义在组件的创建 初始化渲染更新卸载过程我们成为组件的生命周期
在这些过程中执行的回调函数称为组件的生命周期钩子函数

01挂载阶段
constructor
钩子函数函数
componnetWillMount组件将要挂载
render
渲染函数
componentDidMount组件 己经挂载 作用网络请求 可以获取refdom元素


02更新阶段
componentWillReceiveProps组 件将要获取props
shoudcomponentUpdate true 组件更细 false 组件不更新
组件是否需要更新
componentWillUpdate 
组件将要更新
render
渲染函数
componentDidUpdate
组件已经更新

03卸载阶段
componentWillUnmount
组件将要卸载

reac路由
1.模块解释 HashRouter as Router 哈希路由 可起别名
Route path 路径  component 组件 exact 精确匹配
NavLink 导航链接 to链接地址和path对应  exact 精确匹配

2.路由参数
 <Route path="/produce/:id" component={
     Produce}>
  <NavLink to="/produce/:A">
获取参数：props.match.params.id 当前匹配路由的路由参数

组件的props
1.history历史记录
go（）前进后退
goBack （）返回
goFoword（）前进
push（）跳转
replace（）替换 不留历史记录
2.match当前匹配路由
parms｛｝路由的参数
url：当前路由的url
isExact 是否精确匹配
3.location
hash 哈希值 地址#后的内容
pathname 当前路由地址
search （查询参数）问号后面的参数

组件hooks
1.让函数组件拥有更多的能力
需要先导入import React ,{
     Component,useState,useEffect}from 'react'; 
useState 使用状态
useEffect 使用效果 （模拟生命周期）
const [count,serCount]= useState(0); 设置状态

创建页面
page文件夹City文件夹
导入可以省略index.js
import City from './page/City'

使用mockjs
npm i mockjs -D 安装
编写本地mockjs拦截文件  1.导入mock var Mock-require（‘mockjs’）2.编写api Mock

js基础总结
1什么是同源策略
当浏览器发起ajax请求时要求当前页面，请求的服务器地址必须同源
同源 ：协议 子域名 域名端口号一致
拆解一个地址https：///pan.baidu.com:443
协议 https子域名pan 域名baidu.com 端口号是443
如何跨域
定义，绕过浏览器同源策略跨域名获取数据，
两种方式o
jsonp
服务器配置头信息Access-Control-Allow Origin: *
服务算响应头信息跨
允许任何域名访问
jsonp 
1. script标签src属性没有同源限制
2.服务返回数据的格式函数名(数据) --函数传 参调用形式
Promise的应用场景是什么？
1.异步延期的任务：Promise |回调函数
2回调地域（回调函数嵌套层级深）
3ajax网络请求 图片加载 setTimout 延期定时
引用类型和值类型有什么区别
1  值类的值存储在栈中，
2  引用类型在栈中存储的是 内存地址，值在堆中存储
3赋值引用类型，其实是赋值内存地址引用
let a=｛name：“mumu”｝
let b=a
把a的内存地址赋值给b，a与b都引用同一块内存
引用类型有那些，值类型有哪些
引用类型 对象 数组 函数 NULL
值类型 数值 字符串 布尔 undefined 未定义 符号 Symbol
react 组件的传递参数
父组件向子组件通讯 props:。父组 件可以向子组件通过传props的方式，向子组件进行通讯