react学习笔记2--组件

一、创建组件的两种方式：函数创建、类创建

1.函数:

// 1、普通函数
function Compontent1 (){
    return (
        <div>第一个组件</div>
    )
}

// 2、箭头函数
const Compontent2 = () => <div>第一个组件</div>

reactDom.render(<Component1/>,root)

注意：1)函数必须有返回值，不需要渲染也需要返回null.  2)函数名首字母必须大写

2.类

class Component extend React.component {
    render(){
        return (<div>class</div>)
    }
}

reactDom.render(<Component/>,root)

注意：1）类名大写。 2）必须继承React.component。 3）必须有render函数 。 4）render必须有返回值，可以返回null

二、组件化（组件独立成单独的js文件）

 三、事件处理

1、事件绑定

2、事件对象(e)

class Elem extends React.Component {
    clickOperate(e){
        e.preventDefault()
        console.log("e是事件对象")
    }
    render(){
        return (<a href='www.baidi.com' onClick={this.clickOperate}>阻止跳转</a>)
    }
}

四、组件的状态（数据）

函数组件是无状态组件、类组件是状态组件。状态即数据，无状态组件只展示数据、有状态组件负责响应式。

1、state初始化

class Elem extends React.Component {
    state={
        name: '张三',
        age: 10
    }
    render(){
        return (
            <p>this.state.name</p>
            <button onClick={()=>{
                this.setState({age : this.state.age + 1})
            }}>
        )
    }
}

2、修改state, 必须用setState函数！！

3、this指向问题：如果把上面代码onclick的箭头函数抽离到外面，会找不到this,解决方法是抽离函数用箭头函数而不是普通函数！

class Elem entends React.Component {
    state={num:1}
    //错误示范：报错，this是undefined
    fun1(){
        this.setState({num:this.state.num+1})
    }
    //正确示范：fun2是箭头函数，里面的this指向环境中的this，即实例
    fun2=()=>{
        this.setState({num:this.state.num+1})
    }

    render(){
        return (
            <span>this.state.num</span>
            <button onClick={this.fun2}>点击</button>
            {/* 或者用箭头函数的形式调用,下面箭头函数中的this指向当-*/}
{/*前环境的this即实例，则通过this.调用的fun1中的this也指向实例了*/}
            <button onClick={()=>this.fun1()}>点击</button>
        )
    }
}