、类组件

组件的名称必须首字母大写react内部会根据这个来判断是组件还是普通的HTML标签函数组件必须有返回值表示该组件的

结构如果不需要渲染任何内容则返回

标签一样可以被渲染到页面中。

组件表示的是一段结构内容对于函数组件来说渲染的内容是函数的返回值就是对应的内容使用函数名称作为组件标签名称可以成对出现也可以自闭合

//创建

React.Component{render(){return

}function

*/}Hello/Hello/HelloHelloComponent/HelloComponent/HelloComponent/div);

事件名称

{console.log(函数组件中的事件被触发了);}return

div

onClick{clickHandler}hello这是一个函数组件/div

注意react事件采用驼峰命名法

这是标准写法避免this指向问题//这样写回调函数中的this

(){console.log(类组件中的点击事件触发了);}render(){return

div

onClick{this.clickHandler}这是个一个类组件/div}

四、获取事件对象

{console.log(函数组件中的事件被触发了,e);}return

div

onClick{clickHandler}hello这是一个函数组件/div

为事件加个跳转

clickHandler(msg){console.log(函数组件的事件被触发了,msg)}return

div

clickHandler(e,msg){console.log(函数组件的事件被触发了,e,

msg)}return

可以非常方便的通过this关键词拿到组件实例身上的其他属性或者方法console.log(this);};clickHandler2()

{//

存在this丢失问题console.log(this);}render()

{return

onClick{this.clickHandler2}click

2/button/div);}

通过class的实例属性state来初始化state的值是一个对象结构表示一个组件可以有多个数据状态

class

button计数器{this.state.count}/button}

修改状态

React.Component{//1.定义组件状态state{//这里可以定义各种属性全是当前组件的状态name:ggbond}//事件回调函数

changName(){//3.修改状态//注意不可以直接赋值修改必须通过一个方法setStatethis.setState({name:eebond})

(divthis

TestComponent当前name为{this.state.name}button

onClick{this.changName}修改name/button/div)}

}//根组件

数据驱动视图也就是只要修改数据状态那么页面就会自动刷新无需手动操作dom注意事项不要直接修改state中的值必须通过setState方法进行修改

2.定义状态必须通过state实例属性的方法提供一个对象名称是固定的就叫做state

必须走setState方法

React.Component{//通过state定义组件状态state{count:0}//huitiaohanshu

changeCount

要setStatethis.setState({count:this.state.count

1})}render(){return

onClick{this.changeCount}{this.state.count}click/button)}

}//根组件

之前写react很麻烦需要时刻注意this指向哪里但现在不是事了随着js标准的发展主流的写法已经变成了class

fields无需考虑太多this问题

React.Component{constructor(){super()//用bind强行修正我们的this指向//相当于在类组件初始化阶段

就可以把回调函数的this修正到//永远指向当前组件实例对象this.handlerthis.handler.bind(this)}handler(){console.log(this)//这里用this.setstate去修改数据还行吗会报错//老辈会这样做

construtor强绑定一个}render(){return

(button

React.Component{handler(){console.log(this)}render(){console.log(父函数里的this指向为,this)return

(//不用constructor修正直接在时间绑定的位置//通过箭头函数

直接沿用父函数中的this指向也是可以的,这里父函数是render//那我们的箭头函数中的this直接沿用

onClick{()

没必要用这两个修正方案知道有这两个方法就行只需要记住案例中的标准写法就行

九、总结