react入门第一天

前言

react框架是国际大厂脸书的产品,据传说是脸书公司内部的头脑风暴的"产物",生命周期就是它第一个提出的,前端组件式代码也是它创建的.可以说它实现了对前端界的改革。在国内最为流行的 Vue 框架,就是我们尤大大借鉴的 react 框架创建的。那么这位“美女”是美若天仙，还是貌如 “铁锨” 嘞???慢慢学你总会知道滴!!!

一、jsx语法

1. 在react中的代码编写并不同于其他框架中的语法,我们常见的JS语言虽说比较完善,但还是有着本身的痛点.比如:1.代码比较烦乱,程序员去编写时,内容过于繁琐.直接使用全部js变量。而传统的模板，里面的变量需要你在另一种语言中指定，一般要多写代码。而jsx可以是这些痛点消失
2. jsx就是javascript与html混合写法,方便js中书写html模板
3. jsx的特点:
   只有个根节点
   {} js表达式
   {/* 注释内容*/}
   className定义类名
   样式对象会自动展开
   数组可以包含html ,并自定展开

二、组件传参

1. 父传子props

父组件传递
<Steper  num={5}>

子组件接收
props.num

2. 默认参

Steper.defaultProps = {
    num:1
}

3. 子传父
   子传父,执行父组件的传递过来的props回调函数执行回调函数

父组件 
定义函数并把函数传递给子组件
updateSize = (n)=>this.setState({size:n})
<Steper updateSize={this.updateSize}>

子组件
执行props.updateSize()
相当于执行父组件的updateSize方法

三、组件的设计、解构

1. 容器组件：
   一个页面,一个容器组件.
   有state,处理state方法
   数据中心,与数据处理组中心
   类组件
2. 视图组件
   显示内容,一个视图组件
   只有props没有state
   函数组件
3. 解构
   

四、事件

1. 和原生js事件一致 事件命名用驼峰式
   onclick onClick
   onmouseover onMouseover
2. 事件总是要响应一个函数
3. <h1/ oncClick={()=>{ alert(“abc”)}}>
   事件响应 箭头函数
4. doit = ()=>{ alert(“你好”)}

<h1/ onClick={this.doit}>
事件响应定义好的函数
5. 事件传参

<h1 onClick={()=>{this.add(参数)}}>
<h2 onClick={this.add.bind(this,参数)}>

五、组件传参示意图

总结

1. react是一款不可否认的非常好的前端框架,但还是有一点点的’小毛病的’,比如说: 更新的太勤了,您想要使这款框架更加完善的心情我能理解,但也要考虑考虑我们广大的开发人员的心情呀,更新的慢一点吧.
2. 这款框架的思想就是让开发人员经量少的是使用类名等这些东西,能够更好地用js实现效果,初衷是挺好,下次不要这样了.

祝大家学的开心,biu