笔记--React 组件基础

1. React 组件介绍

2. React 组件的两种创建方式

2.1 使用函数创建组件

// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 函数组件
function Hello(){ 
    
    return (
        <div>
        函数组件
    </div>
    )
}
// 使用箭头函数创建组件
const Hello1 = () => { 
    
   return (
       <div>这是箭头函数创建的组件</div>
   )
}

// 渲染组件，直接用函数名作为标签名，可以是单标签也可以是双标签
// ReactDOM.render(<Hello></Hello>, document.querySelector('#root'))
ReactDOM.render(<Hello1></Hello1>, document.querySelector('#root'))

2.2 使用类创建组件

// 1. 导入react，react-dom 两个包
import React from 'react'
import ReactDOM from 'react-dom'

// 使用类创建组件
class Hello extends React.Component { 
    
    render (){ 
    
        return (
            <p>这是类创建的组件</p>
        )
    }
}

// 渲染zujian
ReactDOM.render(<Hello />, document.getElementById('root'))

2.3 抽离为独立的 JS 文件

3. React 事件处理

3.1 事件绑定

3.2 事件对象

// 导入React
import React from 'react'

// 创建组件，事件对象
class Click extends React.Component{ 
    
    handerClick(e){ 
    
        // 阻止默认行为
        e.preventDefault()
        console.log('事件对象', e)
    }
    render(){ 
    
        return (
            <a href='https:www.baidu.com' onClick={ 
    this.handerClick}>点击不会跳转</a>
        )
    }
}

// 将组件暴露出去
export default Click

4. 有状态组件和无状态组件

5. 组件中的 state 和 setState

5.1 state 的基本使用

5.2 setState() 修改状态

// 导入React
import React from 'react'

// state的使用
class Count extends React.Component{ 
    
    // constructor(){ 
    
    // super()

    // // state
    // this.state = { 
    
    // count:0
    // }
    // }
    // 简化语法(推荐)
    state={ 
    
        count:10
    }

    render(){ 
    
        return (
            <button onClick={ 
    ()=>{ 
    
                this.setState({ 
    
                    count:this.state.count+1
                })
            }}>数量：{ 
    this.state.