React组件

使用react就是在使用组件

1.函数创建组件    函数名开头字母必须大写 ,函数组件必须有返回值

// 函数组件
// function Hello () {
// 	return (
// 		<div>这是第一个函数组件</div>
// 	)
// }
const Hello=()=> <div>这是第一个函数组件</div>

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

2.使用类创建组件 

(1)es6的class创建组件 

(2)类名开头字母必须大些 

(3)类组件必须继承React.Commponent父类  

(4)类组件必须提供render()方法

(5)render必须要有返回值,表示组件的结构

// 类组件
class Hello extends React.Component{
	render () {
		return (
			<div>这是我的第一个类组件</div>
		)
	}
}
ReactDOM.render(<Hello/> ,document.getElementById('root'))

3.将创建的组件抽离为独立的js文件

(1)创建 Hello.js

(2)在 Hello.js 中导入 React  创建组件

(3)在 Hello.js 导出该组件

(4)在jindex.js 中导入Hello组件   渲染组件

Hello.js文件内容

import React from "react";

// 创建组件
class Hello extends React.Component{
 render () {
  return (
    <div>这是我的第一个抽离到js文件中的组件</div>
  )
 }
}

// 导出组件
export default Hello

index.js文件内容

// 导入Hello组件
import Hello from './Hello'

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

4.setState的使用     箭头函数解决this指向的问题

// setState的使用
class App extends React.Component {
	state = {
		count:0
	}

	// 事件处理程序
	onIncrement () {
		this.setState({
			count:this.state.count+1
		})
	}

 render () {
  return (
	  <div>
			<h1>计数器:{this.state.count}</h1>
			<button onClick={ () => this.onIncrement()}>+1</button>
			{/* <button onClick={() => {
				this.setState({
					count:this.state.count+1
				})
			}}>+1</button> */}
	  </div>
  )
 }
}
reactDom.render(<App/>,document.getElementById('root'))

bind方法解决this指向的问题

// bind方法解决this指向问题
class App extends React.Component {

	constructor () {
		super()
		this.state = {
		count:0
	}
			this.onIncrement=this.onIncrement.bind(this)
 }
	// 事件处理程序
	onIncrement () {
		console.log(this);
		this.setState({
			count:this.state.count+1
		})
	}

 render () {
  return (
	  <div>
			<h1>计数器:{this.state.count}</h1>
			<button onClick={this.onIncrement}>+1</button>
	  </div>
  )
 }
}
reactDom.render(<App/>,document.getElementById('root'))

class实例方法解决this指向问题  推荐使用

// class实例解决this指向问题
class App extends React.Component {

	state = {
	count:0
}
	// 事件处理程序
	onIncrement = () => {
		this.setState({
			count:this.state.count+1
		})
	}

 render () {
  return (
	  <div>
			<h1>计数器:{this.state.count}</h1>
			<button onClick={this.onIncrement}>+1</button>
	  </div>
  )
 }
}
reactDom.render(<App/>,document.getElementById('root'))