React-组件

React-组件

【1】组件：

（1）函数组件：使用js的函数（或箭头函数）创建的组件
	名字首字母大小，必须有返回值

function Hello(){
	return <div>Hello</div>
}
ReactDOM.render(<Hello />,document.getElementById('root'))

const Hello = () => <div>Hello</div>s

（2）类组件
	大写开头，必须有返回值
	继承React.Component
	必须有render()方法

class Hello extends React.Component{
	render(){
		return( 
			<div>Hello</div>
		)
	}
}
ReactDOM.render(<Hello />,document.getElementById('root'))

【2】组件抽离为单独JS文件：

（1）创建Hello.js
（2）导入React
（3）创建组件
（4）导出组件
（5）index.js中导入Hello组件
（6）渲染
Hello.js

//导入
import React from 'react'
//创建组件
class Hello extends React.Component{
	render(){
		return( 
			<div>Hello</div>
		)
	}
}
//导出组件
export default Hello

index.js
import Hello from './Hello'
//渲染
ReactDOM.render(<Hello />,document.getElementById('root'))

【3】事件处理：

（1）事件绑定
	on+事件名称=(事件处理程序)
	onClick = {()=>{}}

class OnClick extends React.Component{
	handleClick(){
		console.log('单击事件触发了')
	}
	render(){
		return(
			<button onClick={this.handleClick}>
			</button> 
		)
	}
}


function OnClick(){
	function handleClick(){
		console.log('单击事件触发了')
	}

	return (
		<button onClick={this.handleClick}>
              	单击
         		</button>
	)
}

（2）事件对象
		通过事件处理程序的参数获取到事件对象
		React中的事件对象叫做：合成事件（对象）
		合成事件：兼容所有浏览器，无需担心浏览器兼容性问题

	function handleClick(e){
		e.preventDefault()
		console.log('事件对象'，e)
	}
	<a onClick={handleClick}>
		点我
	</a>

【4】有状态组件和无状态组件：

状态（state）即数据
（1）无状态组件-函数组件
	没有自己的状态，只负责数据展示，静态
（2）有状态组件-类组件
	有自己的状态，负责更新UI,让页面动起来

【5】state()和setState()

状态（state）即数据,是组件内部私有数据，只能再组件内部使用
（1）state()
	state的值是对象，表示一个组件中可以有多个数据

class Hello extends React.Component(){
constructor(){
	super()
	//初始化state
	this.state = {
		count:0
	}
}
render(){
	return(
		<div>有状态组件</div>
	)
}
}

	简化初始state

import React from 'react';

class StateTest extends React.Component{
    //简化初始state
    state = {
        count:0
    }
    render(){
        return(
            <div>
                <h1>有状态组件</h1>
                <h1>计数器：{this.state.count}</h1>
            </div>
        )
    }
}

	export default StateTest

（2）setState()修改状态
	this.setState({要修改的数据})
	注：不要直接修改state中的值
	作用：1，修改state 2，更新ui
	数据驱动视图

import React from 'react';

class Count extends React.Component{
    state = {
        count:0,
        test:'a'
    }
    render(){
        return(
            <div>
                <h1>有状态组件</h1>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={() =>
                    this.setState({
                        count:this.state.count+1
                    })
                }>+1</button>
            </div>
        )
    }
}

export default Count

【6】从JSX中抽离事件处理

将逻辑抽离到单独方法中，保证JSX结构清晰

this要指向组件实例
() => this.setState({
        count:this.state.count+1
   }
箭头函数没有this，向上找到render的this
抽离后this是undefined

【7】事件绑定this指向

（1）箭头函数

state = {
    count:0
   }
onIncrement(){
	this.setState({...})
}
render(){
	return(
		<button onClick={() =>this.onIncrement()}>
			+1
		</button>
	)
}

（2）Function.prototype.bind()
	ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

constructor(){
	super()
	this.state = {
			count:0
	}

	this.onIncrement=this.onIncrement.bind(this)
}
onIncrement(){
	this.setState({...})
}
render(){
		return(
			<button onClick={this.onIncrement()}>
				+1
			</button>
		)
	}

（3）class的实例

state = {
     count:0
   }
onIncrement = () => {
	this.setState({...})
}
render(){
	return(
		<button onClick={this.onIncrement()}>
			+1
		</button>
	)
}