标签:ports render 端口 方式 参数 class 完成 就是 efs
在执行this.setState时,后续的代码会马上执行
state = { num:100 } numChange(){ var num = this.state.num; this.setState({ num:++num }); console.log(this.state.num)//此时获取到的数据不是最新的 } render() { return ( <div> <h1>index组件</h1> <h2>num:{ this.state.num }</h2> <button onClick={ ()=>this.numChange() }>增加</button> </div> ) }
解决办法:
setState可以接收第二个参数,这个参数就是回调函数
回调函数,就是在执行完某个操作后,自动调用的函数
this.setState({ num:++num },()=>{ console.log(this.state.num) });
state 状态机,定义组件初始数据
props 接收父组件传递过来的数据
父子组件上都有挂载完成钩子函数,在函数都通过setState来修改数据,由于子组件挂载完成后父组件才算挂载完成,会产生一个数据不一致的问题。
解决方法:
setState的第一个参数使用函数,这个函数中可以接收两个参数
第一个参数是组件自己的数据,第二个参数父组件传递过来的最新数据
总结:
setState 作用:会把指定数据与原有的数据进行合并,并重新渲染页面
如果要在执行setState后获取到最新的数据时,需要使用第二个参数(回调函数)
如果组件中把state和props混用时,建议在setState中使用函数
示例代码:
父组件:
import React, { Component } from ‘react‘ import Child from ‘./Child‘ export default class Index extends Component { state = { num:100 } componentDidMount(){ // console.log(‘父组件挂载完成...‘) this.setState({ num:200 }) } numChange(){ var num = this.state.num; this.setState({ num:++num },()=>{ console.log(this.state.num)//在回调函数中可以获取到最新的数据 }); // console.log(this.state.num)//这里获取到的数据不是最新的 } render() { return ( <div> <h1>index组件</h1> <h2>num:{ this.state.num }</h2> <button onClick={ ()=>this.numChange() }>增加</button> <hr/> <Child indexnum={ this.state.num }></Child> </div> ) } }
子组件:
import React, { Component } from ‘react‘ export default class Child extends Component { state = { num:50 } componentDidMount(){ // console.log(‘子组件挂载完成...‘) // this.setState({ // num:this.props.indexnum // }) // setState如果第一个参数是函数的话 // 第一个参数是组件自己的数据,第二个参数父组件传递过来的最新数据 this.setState(function(state,props){ state.num = props.indexnum; }) } render() { return ( <div> <h2>child组件</h2> <h2>num:{ this.state.num }</h2> </div> ) } }
<h2 ref="myh2">num:{ this.state.num }</h2>
在组件挂载完成的钩子函数中对它进行操作
componentDidMount(){ this.refs.myh2.innerHTML = ‘hello ref‘ }
refs在react中已被弃用
<Child ref={(ev)=>this.setChild(ev)}></Child>
在自定义方法中对子组件进行数据的修改
setChild(el){ //el 现在就是子组件本身 if(el){ el.setState({ num:300 }) } }
在构造函数中使用React.createRef方法,在React推荐使用这种方式,因为回调函数的方式会自动的触发。
constructor(){ super(); this.childEl = React.createRef(); }
在子组件上添加ref属性
<Child ref={ this.childEl }></Child>
在父组件的挂载完成钩子函数中,就可以直接修改的数据或者调用子组件的方法
componentDidMount(){ this.childEl.current.setState({ num:200 }) }
(1)改变React默认运行端口
①在启动react项目时,选择更换端口
②修改文件
node_moudles/react-scripts/scripts/state.js第64行
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 5000;
③package.json中设置端口
"scripts": { "start": "set PORT=3333 && react-scripts start", ...
(2)设置代理转发规则
package.json中设置
"proxy":"http://localhost:3000"
==proxy==是一个一级配置选项
(3)通过插件http-proxy-middleware实现代理转发设置
在package.json中进行设置代理规则,只要不是路由规则的请求地址都会进行代理转发,所以为了更加准确的给指定的请求进行代理转发,需要使用插件来实现。
先把package.json中的proxy选项删除
①安装插件
npm i http-proxy-middleware --save
②在src目录下,创建一个文件,文件名叫:setupProxy.js,并配置转发规则
const proxy = require(‘http-proxy-middleware‘) module.exports = function(app){ app.use(proxy.createProxyMiddleware(‘/api‘,{ target:‘http://localhost:3000‘ })) }
③重启项目
fetch(‘/api/getcate‘).then(response=>response.json()).then(res=>{ console.log(res) })
npm i axios import axios from ‘axios‘ axios.get(‘/api/getcate‘).then(res=>{...})
npm i react-router-dom --save
src/index.js 引入路由模式组件
BrowserRouter是history模式
HashRouter是hash模式
import { BrowserRouter } from ‘react-router-dom‘ import App from ‘./App‘ ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById("root"));
(1)先创建几个页面组件
(2)在src/App.js根组件中引入路由出口和路由规则组件,并定义路由规则
import { Switch,Route } from ‘react-router-dom‘ import Index from ‘./components/pages/Index‘ import Login from ‘./components/pages/Login‘ function App() { return ( <div className="App"> <Switch> <Route path="/index" component={ Index }></Route> <Route path="/login" component={ Login }></Route> </Switch> </div> ); } export default App;
Switch是路由出口,作用和vue中router-view相同
Route是具体的一个路由规则,需要设置path属性和component属性
import { Switch,Route,Redirect } from ‘react-router-dom‘ <Switch> <Route path="/index" component={ Index }></Route> <Route path="/login" component={ Login }></Route> <Redirect path="*" to="/index"></Redirect> </Switch>
Link、NavLink
他们两个都会在页面上生成a标签,都需要设置to属性
NavLink会根据当前访问的路由规则给指定的组件设置激活状态的类名
示例代码:
引入需要的组件
import { Switch,Route,Redirect,Link,NavLink } from ‘react-router-dom‘
使用
<Link to="/index">首页</Link> <Link to="/login">登录页</Link> <hr/> <NavLink to="/index">首页</NavLink> <NavLink to="/login">登录页</NavLink>
只要使用了路由,由路由渲染出来的页面组件的props中包含了路由相关属性和方法
this.props.history.push this.props.history.replace this.props.history.go(-1) this.props.history.goBack()
标签:ports render 端口 方式 参数 class 完成 就是 efs
原文地址:https://www.cnblogs.com/hxmw/p/14353689.html