react 1：jsx语法（组件-状态-事件-组件传值 )（修改样式，事件使用方法，事件类型）

本文链接：https://blog.csdn.net/qq_60839348/article/details/130079113

React 特点

组件可以是一个函数或者是一个类

JSX 语法
单向数据绑定
虚拟 DOM 配合 diff算法
声明式编程
Component 组件化

eg：jsx语法

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

组件创建代码：快捷生成插件：：：安装reactjs code。

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

函数组件：使用rsc创建函数组件

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

定义组件状态：

为什么不是class？

class类名转换成js时会产生歧义和冲突，className可以防止。

js表达式需要包裹在花括号中才能执行

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

列表渲染：

this.state.catelist.map( (item, index) =>{

return （这里边有且只有一个根元素）

} )

修改样式：三目可以的

事件使用方法：事件要小驼峰命名，要写在箭头函数中

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:''},
            ],1
            currentIndex: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接收传递的值

children属性：父想给子组件传递内容，都需要通过children占位

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

props 类型验证：现在都是 typescript 替代了

打印props可以看到

安装开发环境的 sass：

使用：组件中直接导入 .scss文件：import './App.scss'

// sass是 css 的预编译语言
npm i sass  -D

组件模板中可以用 this.state.xxx 访问状态;

修改组件状态并触发更新，必须用 this.setState({ xxx:yyy })

props 与 state 的区别：

props 是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。

而 state 代表的是一个组件内部自身的状态. 可以通过this.setState来修改

props 或者组件内部 state 改变都会导致组件重新渲染

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

事件对象：可以获取

run=(event)=>{     
    alert( event.target )  //获取 dom 节点 
} 
render(){     return( 
        <div>               
            <button aid="123" onClick={this.run}>事件对象</button> 
        </div> 
    ) 
}

this指向问题：constructor 或 render 里面重新 bind

constructor(props){   
    super(props);
    this.state = {}   
    this.login.bind(this); 
} 
<div onClick={ this.login() }>登陆</div>

箭头函数

<div onClick={ ()=>{ this.login() } }>登陆</div>

行内定义事件使用 bind 绑定 this

合成事件：如果 DOM 上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。所以合成事件。不要将原生事件（addEventListener）和 React 合成事件一起混合使用，这两个机制是不一样的

React 支持的事件类型：这些事件的写法；

键盘事件 onKeyDown onKeyPress onKeyUp

焦点事件 onFocus onBlur

表单事件 onChange onInput onSubmit

鼠标事件 onClick onContextMenu onDoubleClick onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onMouseEnter onMouseLeave onDrag

选择事件 onSelect

触摸事件 onTouchCancel onTouchEnd onTouchMove onTouchStart

UI 事件 onScroll 滚动

动画事件 onAnimationStart onAnimationEnd onAnimationIteration

图像事件 onLoad onError

媒体事件 onPause onPlay onCanPlay onLoadStart onProgress

剪贴板事件 onCopy onCut onPaste