react基本介绍与入门

vue和react得区别：
vue官方维护，React社区维护
npm i yarn -g 全局安装yarn
yarn -v 查看版本号

react是 facebook 出的一个针对 view 视图层的 library
react修改端口号react-script里面的scripts下的statr.js里面修改
查看脚手架启动代码 在package.json 里面的scripts查看
//eslint-disable-next-line
这句js就不用eslint进行语法检查了
Fragment 空标记 相当于<></>

npm i react
npm i react-dom
npm i babel-standalone

script标签加 type=“text/babel”

react第一步
引入babel react react-dom 3个js插件
顺序babel>react>react-dom

ReactDOM.render渲染到页面 第一个参数表示要显示什么东西 参数二挂载节点

jsx

jsx原理是React.createElement(‘标签’，{属性}，‘内容’)
react差值表达式是一个{}
注意事项
对象不能直接渲染，数组以字符串得形式直接渲染
jsx中class改为className
事件得首字母要大写onXxx形式

组件
无状态组件 const 组件名(首字母大写)=()=>{
return jsx表达式
}
类组件
class 组件得名字 extends React.Component{
render(){
this 常见得属性 state props refs state是组件内部的状态 props来自组件外部的数据 refs标识一个组件的节点
return jsx表达式
}
}

refs
第一种方法 this.refs标示节点字符串
第二种 <标签 ref={(表示节点的变量)=>this.自定义属性名字=表示节点的变量} /> this.自定义属性名字就可以找到节点了
第三种方式 createRef this.state={ 变量:createRef() } ref={this.state.变量}表示节点 this.state.变量.current 就可以引用这个节点了
state状态
constructor(props){
super(props)
this.state={
key:value
}
}

更改state的值 不能直接改 直接改就会视图不同步 要改state用setState更改 连续执行对象会合并
this.setState({
key:新的value
})
serState第二种用法 连续执行对象不会合并
this.setSetate((prevState,props)=>{ return{ key:value } })

事件绑定处理函数 要进行传参数 this.方法名.bind(this,参数)
事件处理函数的最后一个参数是事件对象

事件对象.target.value 可以拿到输入框里面的值

键盘事件 事件对象.keyCode===13 是回车键
去掉输入框的空格.trim()

可控组件指表单元素得值来自于state，普通组件的数据来自于props，并且值是可改变的，不可控组件的值是不可改变的 特定事件onChange

组件挂载阶段 会自定执行的钩子 constructor>render>componentDidMount

react脚手架安装
npm i create-react-app -g
查找react版本号 create-react-app --version
创建react脚手架 create-react-app 项目名
启动react项目 npm start
npm i install 安装依赖项

全部导入 import * as 命名 from ‘地址’
引入图片import 变量 from ‘图片路径’ <img src={变量} />
图片多了用<img src={require('图片的路径')} />
src文件夹外面得图片可以直接引用

父组件调用子组件的方法
通过ref获取节点 componentDidMount(){comsole.log(this.refs.ref名字.子组件的方法())}
父传子 this.props
通过属性传递
父组件的值传到子组件上面如:<One 方法名={传递的值} /> 子组件通过props.方法名接收
子传父
父组件设置一个方法
子组件this.props.方法名（子组件传过去的值）通过父组件过来的方法来实现的 传递的数据放到参数里去

       方法二设置一个空函数  let {方法名}=（）=>{ }=this.props }     使用方法名(子组件传过去的值)

非相关组件传值

yarn add pubsub-js 安装插件
import PubSub from 'pubsub-js’引入插件
传出PubSub.publish(‘事件名’，‘数据’) 接收是PubSub.subscribe(‘事件名’,(msg,data)=>{data就是数据}

mock 数据工具
npm i json-server -g 全局安装
json-server --v ersion查看版本号
建立一个json文件
进入文件夹
json-server 名字.json --port 端口
加上-w修改json数据不用重启

配置文件的路径 /node_modules/react-scripts/config/webpackDevServer.config.js
弹射配置文件npm run eject 是不能撤销的
正向代理配置方法
proxy:{
“/weather”:{ 代替的地址名
target:“地址链接”,
changeOrigin:true, 是否跨域
“pathRewrite”:{
“^/weather”:"/"
}
}
},

设置props默认值
类组件 static defaultProps={
key:默认值
}
无状态组件 组件名.defaultProps={
key:默认值
}

设置限定类型
import {PropTypes} from ‘prop-types’ 引入
类组件 static propTypes={
key:PropTypes.类型
}
无状态组件 组件名.propTypes={
key:propTypes.类型.isRequired(必须传)
}

挂载阶段生命周期钩子函数
constructor
static(静态) getDerivedStateFromProps(props,state)参数一获取最新的props 参数二获取最新的state 获取派生属性
静态的方法不能用this 调用是用 类名.静态方法名()
render
componentDidMount 组件渲染之后调用

卸载阶段的生命周期函数
componentWillUnmount

更新阶段得生命周期函数

static(静态) getDerivedStateFromProps(props,state)
shouldComponentUpdata(nextProps,nextState)
返回值是布尔值 返回true 就会render 返回false 就不会render 可以加条件减少不必要得渲染，增加性能

render()
getSnapshotBeforeUpdate(prevProps,prevState) 在更新之前 必须和componentDidUpadata一起用 必须返回一个值 Snap
componentDidUpadata(prevProps,prveState,snapshot) 监控数据

PureComponent 纯组件 进行浅比对 进行性能的优化 减少不必要得渲染
React.memo(组件) 对无状态组件性能优化
我们把 参数是组件 返回值也是组件 这类组件我们叫"高阶组件"(HOC)

forceUpdate 强制刷新
yarn add swiper 轮播图插件
import Swiper from ‘swiper’
import ‘swiper/css/swiper.css’

this.props.children 可以渲染子组件 <组件><子组件 /></组件> 没有undefined 一个object 多个Array
路由
npm i react-router-dom yarn add react-router-dom 卸载npm uninstall react-router-dom
路由有两种模式 1 历史记录模式BrowserRouter 2 hash模式 HashRouter
用法 1. 引入 import {BrowserRouter as Router} from ‘react-router-dom’
2. 根组件
3. 引入 import {Route,Link或NavLink, d } from ’ react-router-dom’
4.
5. 内容
内容 默认选中有一个类默认得名字叫active 可以设置点击颜色
7. 路由切换得组件有三个属性(props) history location match
8. exact 精确匹配
9. Redirect 重定向
10. 404页面
11. Switch 作用是 多个组件匹配 只渲染第一个
12. withRouter 作用是让不是路由切换得组件也具有路由切换得三个属性(location match history ) 使用是先引入 然后withRouter(组件名)

 监控路由得变化   this.props.history.listen((location)=>{        //效果在day6  作业one   app.js
//location.pathname 会根据路由得变化而变化

})
解决刷新 在constructor里又调用了一次函数 把this.props.location.pathname传入

传参 Link to=’/地址/实参/’ path="/地址/：参数"
取路由传参 参数 this.props.match.params.参数

Redirect组件 to属性可以传值 <Redirect to={{pathname:xxx,state:{key:value}}}

yarn add node-sass 安装sass

新增特性 hook 先从react引入useState

useState 在无状态组件里也可以使用状态 let [数据,修改数据的函数]=useState(数据的初始值)

编程式导航 this.props.history.push(路径地址) 需要使用withRouter

Route的render属性
<Route path=xxx" render={(props)=>{render<组件 {…props} />}} />
扩展 children 无论是否匹配都会渲染 没匹配 match为空 匹配了match有值 用法和上面一样

redux 状态管理工具 npm i redux
三大原则 store是唯一的 单一数据源 State是只读的(保证数据可追溯) 通过纯函数reducer 能够对状态进行修改
使用步骤
src下面创建一个文件夹作为仓库

1.引入createStore import {createStore} from ‘redux’
2.设置初始数据var initState={key:value}传给reducer
3. var reducer =(state,action)=>{ return state} state数据 action动作
4. var store=createStore(reducer)
5. export default store 导出 获取数据是store.getState().state种的变量
6.store的常用方法
store.getState() 取数据 dispatch({type:’’,key:value…})向仓库的action传值 subscribe监听store里的数据变化
7修改数据
store.dispatch(动作) action 是一定含有type的一个对象
动作发给了 reducer 第二个参数action action一定有type 还可以接收一些其他参数
根据type修改数据 做state的复本 修改state的复本对象 返回新的state
8. 如果数据没有更新 把var newState={…state}改为深拷贝 var newState=JSON.parse(JSON.stringify(state))

redux分模块
import {combineReducers} from ‘redux’
var reducer=combineReducers（{模块的名字:引入的reducer}）
分模块以后使用 store.getState().模块的名字.变量

context上下文

1. import {createContext} from ‘react’
2. let {Provider,Comsumer}=createContext()
4. 在组件里拿到Consumer
   
   {
   (value)=>{
   return
   …
   
   }
   }
   
5. Consumer 只是能在render进行渲染
   在方法里拿到context 使用context传来的数据的组件里写一个 contextType的静态属性 static contextType=context
   设置后 就可以使用 this.context拿到context传过来的数据

react-redux插件

1. yarn add react-redux
2. import {Provider} from ‘react-redux’ 用包裹app
3. 组件里引入 import {connect} from ‘react-redux’ {connect} 是高阶组件 连接容器组件和ui组件
4. 组件里面export default connect((state) => state,action的文件名)(组件名);
   一般这样写 var mapState=(state)=>state export default connect(mapState,action的文件名)(One)
5. mapState 映射的时候，可以做计算的值的映射

异步操作
redux-thunk 安装yarn add redux-thunk
在store的入口文件引入 applyMiddleware import {createStore,applyMiddleware} from ‘redux’;
引入 import thunk from ‘redux-thunk’
createStore(reducer,applyMiddleware(thunk)) var store = createStore(reducer,applyMiddleware(thunk))
actionCreator里面 方法要放回 回到函数 参数就是 dispatch
命名(){
return（dispatch）=>{
异步的动作 成功后再异步动作回调里 使用dispatch发出动作给reducer
获取接口是 fetch(‘接口地址’).then((res)=>{
dispatch({ type:‘大写的命名redux那个’ ，数据存入redux })
})
}
}

如：getData(){
return (dispatch)=>{
fetch(“http://localhost:4000/list”).then((res)=>res.json()).then((res)=>{
console.log(res);
dispatch({
type:‘GETDATA’,
list:res
})
})
}
}

react cli 环境下用@指向src 在配置文件config-overrides.js
const { addWebpackAlias } = require(‘customize-cra’);
const {resolve}=require(‘path’)
addWebpackAlias （{
‘@’:resolve(‘src’)
}）

ui库
全局引入
yarn add antd安装依赖
index.js引入antd/dist/antd.css
按需加载

1. yarn add react-app-rewired customize-cra
   yarn add react-app-rewired 不用弹射就可以设置webpack
   customize-cra 自定义脚手架环境
   2.package.json
   改scripts start：react-app-rewired start
   3.项目的根目录建立一个配置文件 config-overrides.js
   const { override, fixBabelImports } = require(‘customize-cra’);
   module.exports = override(
   fixBabelImports(‘import’, {
   libraryName: ‘antd’,
   libraryDirectory: ‘es’,
   style: ‘css’,
   }),
   )
   4.yarn add babel-plugin-import

配置装饰器
1.yarn add @babel/plugin-proposal-decorators
2.const {addDecoratorsLegacy } = require(‘customize-cra’); 在配置文件config-overrides.js
3.module.exports = override(
addDecoratorsLegacy()
)
4. @高阶组件 需要接收参数时的写法@高阶组件(参数)
class 组件 extends Component{
}

配置代理
src 目录下新建名为 setupProxy.js 文件进行代理配置
yarn add http-proxy-middleware

const {createProxyMiddleware}=require(‘http-proxy-middleware’)
module.exports = function (app) {
app.use("/api",
createProxyMiddleware({
target:‘接口地址’，
changeOrigin:true，
pathRwrite：{
“^/api”:"/"
}
}
))
}

设置font-soze:100px; 100px=13.3333vw;所以font-size:13.3333vw; 量出来的px除以100就是rem

history常用的是 this.props.history.push listen go… 适合做编程式导航和监听路由的变化
match 取路由的参数
location常用的是 location.pathname
location.search(取查询字符串 ) 在编程式导航push里面+"?a=111&b=222"
qs可以转为对象 先引入 import qs from ‘querystring’ // qs.parse(a=xxx&b=yyy) {a:xxx,b:yyy}
console.log(qs.parse(this.props.location.search.slice(1))) 因为有问号search从第一个开始
location.state 传递多个值 console.log(this.props.location.state)查看