写点什么

只需三步,带你从 0 到 1 玩转 React,附源码我一定给你讲明白

用户头像
小Q
关注
发布于: 2020 年 11 月 03 日

不知道为什么,自从我开始在这里写一些我的工作和生活纪要之后,老大就开始各种的让我做一些很神奇的东西,难道他知道了(小声嘀咕),虽然我知道不可能,这老小子除了媳妇孩子让他上心之外,绝对不可能拿手机看文章的(这句话就是测试一下,要是他真的看我的文章的话,我基本就不会在更新了。哈哈哈哈哈)这次的内容是一个开发实战,刚好我们项目用到了,之前的时候我自己玩过并且代码提交了Git,所以这次直接拿来用了,用同事的话说我就是个百宝箱,有好多可以直接cv的代码用,今天就给大家介绍一下我们日常应用比较多的React,主要是以下几个方面



  1. React中怎么实现后台调用(异步+同步)

  2. React父子组件传值

  3. 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;
}



真实案例

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));
}



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')
)



子组件给父组件传值

思路:由于子组件并不能直接处理父组件的状态,但是我们可以通过父组件的方法更改父组件的状态。



// 创建父组件
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')
)



修改深层state属性

遇到的环境:




this.state=({
   key:1,
   funcTree:null,
   checkedKeys:[],
   searchCard:{
       searchCard:"",,
       cardKey:0,
       selectedKey:"",
       expandKeys:[],
  },
   drawer:{
drawerKey:1,
isShow:false,
data:[1,2,3]
}
});



上面的state中包含了多层的数据结构,当你在试图用如下方法改变子结构的时候,例:




this.setState({
drawer:{
isShow:true
}
});



它会使drawer下其他属性丢失。



解决的方案:




this.state.drawer.isShow = true;
this.setState(
   this.state
);



这样同时保留了其他的属性。






毕竟不是专业的写手,文笔有限,这几个内容是我自己觉得比较重要的内容,应该是在日常的工作中应用比较多的地方,大家在日常的学习中可以稍微自己实践一下,个人觉得,实践出真知,我自己是成功了,但是到你那里,可能会出现一些未知的错误,解决这些问题就是成长的开始



加油吧,程序员!!



发布于: 2020 年 11 月 03 日阅读数: 26
用户头像

小Q

关注

还未添加个人签名 2020.06.30 加入

小Q 公众号:Java架构师联盟 作者多年从事一线互联网Java开发的学习历程技术汇总,旨在为大家提供一个清晰详细的学习教程,侧重点更倾向编写Java核心内容。如果能为您提供帮助,请给予支持(关注、点赞、分享)!

评论

发布
暂无评论
只需三步,带你从0到1玩转React,附源码我一定给你讲明白