React从入门到放弃 Day2

1.新建子组件引入的东西都一样
2.在父组件中引入子组件注意名字开头大写表示自定义组件
3.在需要使用子组件的地方放入子组件标签<xxxx/ >
4.父子组件传值

=》父向子传值通过属性绑定（和Vue类似）

<XiaojiejieItem content={item} />

子组件接收

this.props.content

=》子向父传值
注意。因为React是单向数据流，所以子组件不允许修改父组件的值
所以子组件需要调用父组件的方法来修改值

 del={() => this.delItem()}  //父组件里的代码<li onClick={()=>this.props.del(this.props.index)}>{this.props.contant}</li> //子组件的代码

5.如果有传值存在，则需要对传的值进行类型校验
首先先引用PropTypes

import PropTypes from 'prop-types'

然后引用

XiaojiejieItem.propTypes={content:PropTypes.string,deleteItem:PropTypes.func,index:PropTypes.number
}

注意，引用的地方为class外部！

avname:PropTypes.string.isRequired

这个表示必须有值

XiaojiejieItem.defaultProps = {avname:'松岛枫'
}

这个表示传的值有默认值。当没有值的时候用这个。也写在class外部

6.ref属性（个人感觉vue的ref好用很多）
要用ref首先在jsx中绑定

<input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}ref={(input)=>{this.input=input}}/>

然后你在获取值的时候就不需要从e中获取
可以直接ref

inputChange(){this.setState({inputValue:this.input.value})
}

7.setState方法是个异步的，需要变为同住执行可以在后面进行回调函数

addList(){this.setState({list:[...this.state.list,this.state.inputValue],inputValue:''//关键代码--------------start},()=>{console.log(this.ul.querySelectorAll('div').length)})//关键代码--------------end
}

类似这样的

7.生命周期函数。明儿在研究。

总结：先学的Vue，现在学React感觉Vue真香。总觉得Vue好用很多。Orz

React从入门到放弃 Day2相关推荐

Android插件化：从入门到放弃
喜欢 | 作者包建强发布于 2016年7月14日. 估计阅读时间: 1 分钟 | 道AI风控.Serverless架构.EB级存储引擎,尽在ArchSummit!讨论分享到:微博微信Facebo ...
【微信小程序】从入门到放弃
前言关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能草民看过很多的文档,微信 ...
umi ssr 之从入门到放弃
今年7月份的时候用umi搭建了react ssr,发现了不少问题,记录一下,作为后来人选型的参考,是真正的从入门到放弃.如果下面罗列的问题你们自己有办法解决,那可以考虑使用,当然,以下仅供参考,可能官 ...
小白学 Python 爬虫（28）：自动化测试框架 Selenium 从入门到放弃（下）
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇小白学 Python 爬虫(2):前置准备(一)基本类库的安装小白学 Python 爬虫(3):前置准备(二)Li ...
react-native从入门到放弃
刚刚度过了繁忙的一个月,连续不断的需求让自己有点招架不住了.写的代码质量有些堪忧,又导致不断的修改bug,陷入了恶性循环中了,不过随着最近最后一个需求即将完结,终于抽空写写rn相关的内容了.这个标题略 ...
AI从入门到放弃2：CNN的导火索，用MLP做图像分类识别？
来源 | 腾讯知乎专栏作者 | AIoys(腾讯员工,后台工程师) 项目文档和代码在此:github项目地址: https://github.com/zsysuper/AI_Notes ▌一.前言 ...
AOP埋点从入门到放弃（二）
其实人最大悲哀莫过于知道自己想要什么,却不知道怎么坚持!最近迷恋上了死侍其实和我平时的状态差不多,以一个混子的心态去做任何事情,往往成功的概率会更大!!! 一张图片镇楼!!! 上文说到了Aspect ...
入门到放弃node系列之网络模块（二）
为什么80%的码农都做不了架构师?>>> 前言本文首发[一名打字员] 上一节我们刚刚介绍完node的HTTP和HTTPS模块,相信我们也对nodejs有了更深层次的理解,接下 ...
webpack - vue Component 从入门到放弃（三）
离上一篇已经一个星期了,人的拖延症是没法救的,今晚趁着蒙蒙春雨,来抒发抒发情感. 上一篇简单介绍了webpack的配置,这里稍微再做一一下延伸插件插件可以完成更多 loader 不能完成的功能.插 ...

React从入门到放弃 Day2

React从入门到放弃 Day2相关推荐

最新文章

热门文章