react学习

jxs

react里的jsx和js比较像 代码优化，安全
const =

12312312

jsx里的class 为了避免和js里的class冲突 所以名字为className
for 为 htmlFor
自定义属性要家data- 前缀 data-attribute
表达式写在{} 里面
没有if else 使用 {i==1?‘true’:false}
react推荐使用内联样式
var myStyle ={ fontSize:100,color:‘black’} 其中的fontSize会自动补齐px
注释写在{}里 {/ 注释/}

允许插入数组
var arr = [

12

,

12

,];
ReactDOM.render(

{arr}

,document.get…)

组件
function ZUjian(){
return

;
}
使用的时候
class ZUjian extends React.Component{
render(){
return

; （只能包含一个顶层标签）
}
}
定义的React类 以大写字母开头

state更新 ===render 更新渲染
()=> 箭头函数 this.test() class里的test()函数
function(){} 普通函数
如果在普通函数里使用this 这个this指的是这个function 不是整个的那个class
但是如果是用的箭头函数就是指的是整个class

props
class Name extends React.Component
props.name 使用
Nmae.defaultProps = { name: ‘xxx’}; 默认的props的设置
往一个组件传入参数 props.xx 传入参数
MyTitle.propTypes = {
title: PropTypes.string
}; props的验证 ， 这个是设置了类型 如果不对会在控制台显示错误，但是内容还是会正常显示在页面里
或者在class里面直接
propTypes:{ title:React.PropTypes.string.isRequired}

react里有refs ， 就像是id一样，可以根据这个获取到元素，进行操控

this.refs.myFirst.value 获取到这个值
(上面的这个refs是以前的方法，现在已经过时了）
最新的方法

this.myRef = React.createRef();
render({return(
<div ref={this.myRef}></div>
)})

不过ref要少用，不能过度的时候ref，更多的依赖state