react 1：jsx-组件-状态-事件

主要是为了解决什么问题 ？

构建那些数据会随时间改变的大型应用 

  React 特点

1. 虚拟 DOM
2. 组件系统

3.  单向数据流

4. jsx语法

jsx语法

 组件创建方式 两种：class类组件，函数方式创建

 代码快捷生成插件：：：rcc快速生成

类组件：使用rcc创建类和组件

函数组件：使用rsf创建类组件

关掉严格模式，在index.js中关闭掉严格模式：避免打印两次影响思维

为什么不是class，class类名转换成js时会产生歧义和冲突，className可以防止

return后有且仅有一个根元素

定义组件状态

js表达式需要包裹在花括号中才能执行，在标签里可以执行js代码

本地图片必须提前导入。网络图片不需要

列表渲染

 事件小驼峰命名

组件传值

对于组件自身来讲：props：是只读属性，state：是可变的

 合成事件：自己搜

这里边注释看看：样式，事件使用方法

import React, { Component } from 'react';
import './index.scss'
class Tabbar extends Component {constructor(props){super(props);// 定义组件状态this.state = {tab:[{text:'首页',img:''},{text:'分类',img:''},{text:'购物车',img:''},{text:'我的',img:''},],1currentIndex:0, //小圆点}}handleClick(index){// this.state.currentIndex = index; //这个写法可以保存数据到组件状态中，但是无法触发组件更新// setState //会保存数据到组件状态中，同时会触发组件更新this.setState({currentIndex:index},()=>{// 想要获取setState保存的最新状态值，必须在第二个参数的回调函数中获取( setState本身是异步的)console.log('handleClick', this.state.currentIndex);})}render() {// 在js外可以不用 {} 括着console.log('render 组件更新了');return (<div className='tabbar'>{/* 列表 */}{this.state.tab.map((itme, index) => {// // 写在标签上//     // 样式绑定，第一个{}表示里边是js表达式，第二个{}表示对象（对象里边是键值对）//     style = {{color:this.state.currentIndex == index?'red':'', this.state.currentIndex == index?'bold':''}}//     // class绑定，建议：事先写一个同层次的css触发样式: .active//     className = {`btn${this.state.currentIndex == index? 'active':''}`}//     // 事件绑定//     onClick={this.handleClick} //这种写法无法传参//     onClick={this.handleClick(index)} //这种写法组件更新时就会立即执行函数，点击时没反应//     onClick = { () => {this.handleClick(index)} }//     // 这种写法点击时才会调用函数，也可以传参return(<div key={index} className={`btn ${this.state.currentIndex == index?'active':'' }`} onClick={()=>{this.handleClick(index)}}><img src={itme.img} alt="" /><div className='text'>{itme.text}</div></div>)})}</div>);}
}export default Tabbar;

props和state的区别

children属性：类似vue中的slot效果