摘要：
Err）｛console.log（'表单中的值：'，Values）；letrequest=Values；request.test
Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单.
在小项目里Context API完全可以替换掉react-redux.
修改app.js
import React, { lazy, useState } from "react";
import { Button } from 'antd';
import { HashRouter as Router, Route, Link } from 'react-router-dom';
import GlobalContext from './globalContext' // 导入全局context
import './App.css';
//import Hehe from './hehe' //直接导入会让包变大,使用lazy会让包变小
const Hehe = lazy(() => import("./hehe"));
const T2 = lazy(() => import("./T2"));
const Reg = lazy(() => import(/* webpackChunkName: "reg" */'./reg'));
//普通的组件
const PageHeaderWrapper = (prop) => {
console.log("子组件刷新...");
return (
<>
<div>PageHeaderWrapper Memo:{prop.loading} {new Date().getTime()}</div>
<div>{prop.content}</div>
</>
)
}
// React.memo对PageHeaderWrapper组件进行包装,让这个PageHeaderWrapper组件进行包装组件变成可控组件
// React.memo()可接受2个参数，第一个参数为纯函数的组件，第二个参数用于对比props控制是否刷新，true不更新,与shouldComponentUpdate()功能类似。
const Memo = React.memo(PageHeaderWrapper, (prevProps, nextProps) => {
console.log(prevProps, nextProps);
//return true;
return prevProps.loading === nextProps.loading
}
);
//定义一个方法用来测试接受 Provider
const ChangeName = (props) => {
return (
<GlobalContext.Consumer>
{context =>
<div>{props.title}: {context.name}</div>
}
</GlobalContext.Consumer>
)
}
//产生一个随机内容的obj 只是为了示例使用
const rand = () => {
const a = parseInt(Math.random() * 4, 10);
return { name: "aaa" + a }
}
//入口文件
const App = () => {
const [value, setValue] = useState({ name: "aaa" });
return (
<GlobalContext.Provider value={value}>
<div className="App">
<header className="App-header">
<Memo loading={value.name} content='Memo content' />
<Button type="primary" onClick={() => setValue(rand)}>Hehe</Button>
<p>
Provider: {value.name}
</p>
<ChangeName title="changeName"></ChangeName>
<React.Suspense fallback="T2 loading...">
<Hehe />
</React.Suspense>
<Router>
<Link to="/reg">
<div>会员注册</div>
</Link>
<Link to="/t2">
<div>跳转到异步组件t2</div>
</Link>
<Route exact path='/' component={() => <React.Suspense fallback="T2 loading..."> <T2 /> </React.Suspense>} />
<Route path='/t2' component={() => <React.Suspense fallback="T2 loading..."> <T2 /> </React.Suspense>} />
<Route path='/reg' component={() => <React.Suspense fallback="Reg loading..."> <Reg /> </React.Suspense>} />
{/* <Route path='/regsync' component={Reg1} /> 使用同步组件会让包变大 */}
</Router>
</header>
</div>
</GlobalContext.Provider>
)
}
export default App;reg.js
import React from "react"; import axios from "axios"; import { Form, Icon, Input, Button, Checkbox, Table } from 'antd'; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: 'Email', dataIndex: 'email', key: 'email', }, { title: 'Ip', dataIndex: 'ip', key: 'ip', }, ]; //不要在使用class组件,使用函数式组件来,具体看T2.js class NormalLoginForm extends React.Component { constructor(props){ super(props) this.state = { dataSource:[] } } handleSubmit = e => { e.preventDefault(); //开始验证表单,如果原因 通过执行回调发送ajax this.props.form.validateFields((err, values) => { if (!err) { console.log('表单里的值: ', values); let request=values; request.test="test"; //向后台发送 axios.get("https://www.easy-mock.com/mock/5a3a2fc5ccd95b5cf43c5740/table_list",{ params: request }).then(response=>{ //后台返回的值: console.log(response.data); this.setState({dataSource:response.data.data}) }).catch(e=>{ //请求网络原因等失败了处理 }); } }); }; render() { const { getFieldDecorator } = this.props.form; return ( <div id="components-form-demo-normal-login"> <Form onSubmit={this.handleSubmit} className="login-form"> <Form.Item> {getFieldDecorator('username', { rules: [{ required: true, message: 'Please input your username!' }], })( <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />, )} </Form.Item> <Form.Item> {getFieldDecorator('password', { rules: [{ required: true, message: 'Please input your Password!' }], })( <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />, )} </Form.Item> <Form.Item> {getFieldDecorator('remember', { valuePropName: 'checked', initialValue: true, })(<Checkbox>Remember me</Checkbox>)} <Button type="primary" htmlType="submit" className="login-form-button"> Log in </Button> </Form.Item> </Form> <Table dataSource={this.state.dataSource} columns={columns} style={{background:'#fff'}} /> </div> ); } } const Reg = Form.create({ name: 'normal_login' })(NormalLoginForm); export default Reg;
T2.js
import React, {useState, useEffect} from "react";
import axios from "axios";
//组件 里可以使用state,这样就可以不在使用class
const T2=(prop)=>{
const [message, setMessage]=useState(()=>{
return 'start...';
});
function temp(){
axios.get('http://route.showapi.com/1764-1').then(response=> {
console.log(response.data.showapi_res_error);
setMessage(response.data.showapi_res_error);
})
}
useEffect( () => {
temp()
}, [message]);
// 给useEffect传第二个参数。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。
return (
<>
<div>T2. message: {message}</div>
</>
)
}
export default T2;GlobalContext.js
import React from 'react' const GlobalContext = React.createContext(); export default GlobalContext;