React基础入门(技术胖的基础教程示例)

本文介绍了React的基础知识,包括JSX语法、组件状态管理、父子组件通信、生命周期函数的运用以及PropTypes类型检查。通过示例详细讲解了如何创建组件、管理状态、传递数据以及使用生命周期函数。同时提到了React Developer Tools和相关VSCode插件以辅助开发。
摘要由CSDN通过智能技术生成

这周学习了react框架的基础知识,大概就是一些官方文档上的内容
大概可以分为以下几个方面:
1、JSX语法
简单理解JSX语法就是JavaScript+XML语法,遇到{ }按照JavaScript语法来解析,遇到标签按照html来解析,这样结合起来方便操作虚拟DOM。
组件后缀.jsx或.js,组件名要是大写,否则会报错。
2、组件状态
组件的变量通过状态来管理,访问要通过this.state.变量名,修改要使用this.setState({}),setState可以提供回调函数。
有一个状态提升的概念,意思是如果组件之间需要共享数据,需要把数据放在它们最近的父组件当中。

constructor(props) {
   super(props);
   this.state = {  }
}

3、父子组件之间的通信
父组件通过props传递数据给子组件,子组件不能够修改父组件传递来的数据,但是可以接收父组件的方法,可以在父组件的方法里修改数据。
会在示例中展现。
4、React生命周期函数
我对生命周期函数的理解是组件从开始渲染到销毁过程中注入了一些可以自动完成的钩子函数,我们可以利用这些钩子函数去操控组件,vue的生命周期函数应该也是这个道理。
可以在生命周期函数内去获取数据

componentDidMount(){
        axios.get('http://iwenwiki.com/api/blueberrypai/getIndexBanner.php')
        .then((res)=>{
            console.log(JSON.stringify(res))
    
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值