不知道为什么，自从我开始在这里写一些我的工作和生活纪要之后，老大就开始各种的让我做一些很神奇的东西，难道他知道了（小声嘀咕），虽然我知道不可能，这老小子除了媳妇孩子让他上心之外，绝对不可能拿手机看文章的（这句话就是测试一下，要是他真的看我的文章的话，我基本就不会在更新了。哈哈哈哈哈）这次的内容是一个开发实战，刚好我们项目用到了，之前的时候我自己玩过并且代码提交了Git，所以这次直接拿来用了，用同事的话说我就是个百宝箱，有好多可以直接cv的代码用，今天就给大家介绍一下我们日常应用比较多的React，主要是以下几个方面
React中怎么实现后台调用（异步+同步）
React父子组件传值
React如何修改深层state属性
好了，老规矩，正式看代码之前，先来给我点个关注+评论吧，谢谢各位的支持
个人公众号：Java架构师联盟，每日更新技术学习好文
React如何调用后台
使用惯了jQuery封装好的ajax方法，这次在使用React项目开发时，着实令人着急，记录一下。
fetch
fetch是用来取代传统的XMLHttpRequest的。 它的优点很多，包括链式调用的语法、返回promise等。
下面就是最基本的fetch使用，默认是异步的。
fetch(url,{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: data, // data为传输对象
}).then(res => {
res.json().then(data => { // data为返回的对象
console.log(data);
});
}).catch(function(e) {
console.log("ERROR");
});
简洁版：
let option = {}; // 参数
options.method = 'post';
let data={};
options.body = JSON.stringify(data);
options.headers={
'Content-Type':'application/json'
};
fetch(url,option).then(res => res.json())
.then(data => console.log(data))
.catch(e => console.log("error", e))
如何同步调用
使用 async 和 await 关键词，不过听说对浏览器兼容性不好。
// 在方法前加上async关键词
async function fetchAsync () {
let response = await fetch(url);
let data = await response.json();
return data;
}
need-to-insert-img
真实案例
getData=(id)=>{
let option = {}; // 参数
options.method = 'post';
let data={id:id};
options.body = JSON.stringify(data);
options.headers={
'Content-Type':'application/json'
};
fetch(baseUrl+"/xx/xxxx",option)
.then(res=> res.json())
.then(res=> {
if(res.status===200){
// 获取返回值，修改state
this.setState({
data:res.data.list
});
}
})
.catch(e => console.log("error", e));
}
need-to-insert-img
React父子组件传值
父组件给子组件传值
子组件给父组件传值
父组件给子组件传值
思路：把需要传递的值获取，并放入state中，并把state中的值通过props传递给子组件；子组件在根据父组件传递来的值进行处理。
// 首先创建父组件
class ParentCom extends React.Component{
constructor(props){
super(props)
this.state=({
content:'给子传input',
zi_content:'' // 这个是需要传递的值
})
}
// 父组件通过此方法，把需要传递的值，放入state中。
giveValue = (e) =>{
let value = document.getElementById("fu_input").value;
this.setState({
zi_content : value
});
}
render(){
return(
<div>
<Button onClick={this.giveValue}>给子传值</Button>
<Input id="fu_input" defaultValue={this.state.content}></Input>
{/* 把需要传递的值，传递给子组件 */}
<ChildCom zi_content = {this.state.zi_content}/>
</div>
)
}
}
// 创建子组件
class ChildCom extends React.Component{
constructor(props){
super(props)
}
render(){
let val = '';
if(this.props.zi_content){
// 获取props中，父组件传递过来的值
val = this.props.zi_content
}
return(
<div>
<div>我是子</div>
<Input defaultValue={val} value={val}></Input>
</div>
)
}
}
ReactDOM.render(
<ParentCom />,
document.getElementById('root')
)
need-to-insert-img
子组件给父组件传值
思路：由于子组件并不能直接处理父组件的状态，但是我们可以通过父组件的方法更改父组件的状态。
// 创建父组件
class FuCom extends React.Component{
constructor(props){
super(props)
this.state=({
zi_value:""
})
}
// 父组件定义方法 可以修改父组件的值，把这个方法传递给子组件
changeData = (msg,e) =>{
this.setState({
zi_value:msg
})
}
render(){
return(
<div>
子组件传来的值：
<span>{this.state.zi_value}</span>
{/*把修改父组件数据的函数传递给子组件*/}
<ZiCom changeData={this.changeData}/>
</div>
)
}
}
// 创建子组件
class ZiCom extends React.Component{
constructor(props){
super(props)
this.state=({
input_val:"子组件的初始内容"
})
}
// 子组件接收 从父组件传来的 修改父组件值的方法 传递参数 修改父组件的值
sendData = (e) =>{
let val = document.getElementById("inputId").value;
this.props.changeData(val)
}
render(){
return(
<div>
<Input type="text" id="inputId" defaultValue={this.state.input_val} ></Input>
<Button onClick={this.sendData}>给父传值</Button>
<Button onClick={(e)=>{this.props.changeData('Hello world',e)}}>直接通过props 函数</Button>
{/* <Button onClick={function(e){this.changeData('dd',e)}.bind(this)}>不使用es6绑定函数</Button> */}
</div>
)
}
}
ReactDOM.render(
<FuCom />,
document.querySelector('#root2')
)
need-to-insert-img
修改深层state属性
遇到的环境：
this.state=({
key:1,
funcTree:null,
checkedKeys:[],
searchCard:{
searchCard:"",,
cardKey:0,
selectedKey:"",
expandKeys:[],
},
drawer:{
drawerKey:1,
isShow:false,
data:[1,2,3]
}
});
need-to-insert-img
上面的state中包含了多层的数据结构，当你在试图用如下方法改变子结构的时候，例：
this.setState({
drawer:{
isShow:true
}
});
need-to-insert-img
它会使drawer下其他属性丢失。
解决的方案：
this.state.drawer.isShow = true;
this.setState(
this.state
);
这样同时保留了其他的属性。
毕竟不是专业的写手，文笔有限，这几个内容是我自己觉得比较重要的内容，应该是在日常的工作中应用比较多的地方，大家在日常的学习中可以稍微自己实践一下，个人觉得，实践出真知，我自己是成功了，但是到你那里，可能会出现一些未知的错误，解决这些问题就是成长的开始
加油吧，程序员！！
