react组件

1. 组件创建

1.1 使用函数创建

  • 使用js的函数或箭头函数创建的组件
function Hello(){
	return (
    	<div>第一个函数组件</div>
    )
}
  • 约定
    • 函数名称必须以大写字母开头
    • 函数组件必须有返回值，表示该组件的结构
  • 渲染函数组件：用函数名作为组件标签名
ReactDOM.render(<Hello/>,document.getElementById('root'))

1.2 使用类创建组件

  • 类组件：使用ES6的class创建的组件
class Hello extends React.Component{
	render(){
    	return (<div>Hello Class Component!</div>)
    }
}
  • 约定
    • 类名称也必须以大写字母开头
    • 类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
    • 类组件必须提供render()方法
    • render（）方法必须有返回值，表示该组件的结构

1.3 抽离为独立JS文件

  • 1.创建Hello.js
  • 2.在Hello.js中倒入React
  • 3.创建组件（函数或类）
  • 4.在Hello.js中导出该组件
  • 5.在index.js中导入Hello组件
  • 6.渲染组件

2 react事件处理

2.1 事件绑定

  • react事件绑定语法和事件语法相似
  • 语法：on+事件名称={事件处理程序}，比如：onClick={()=>{}}
  • 注意：react事件采用驼峰命名法，比如：onMouseEnter/onFocus
//通过类组件
class App extends React.Component{
	handleClick(){
    	console.log('单击事件触发了')
    }
  	render(){
    	return(
        	<button onClick={this.handleClick}></button>
        )
    }
}
//通过函数组件
function App(){
	function handleClick(){
    	console.log('函数组件中的事件绑定，事件触发了')
      return(
      	<button onClick={handleClick}>点我</button>
      )
    }
}

2.2 事件对象

  • 可以通过事件处理程序的参数获取到事件对象
function handleClick(e){
	e.preventDefault()
  	console.log('事件对象',e)
}
<a onClick={handleClick}>点我，不会跳转页面</a>
  • react中的事件对象叫作：合成事件（对象）
  • 合成事件：兼容所有的浏览器，无需担心跨浏览器兼容性问题

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

  • 函数组件又叫作无状态组件，类组件又叫作有状态组件
  • 状态即数据
  • 函数组件没有自己的状态，只负责数据展示（静）
  • 类组件有自己的状态，负责更新UI，

4. 组件的state

4.1 state的基本使用

  • 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
  • state的值是对象，表示一个组件中可以有多个数据
class Hello extends React.Component{
  //语法1状态初始化
	constructor(){
    	super()
      	this.state={
        	count:0
        }
    }
  //语法2状态初始化
  	state={
    	count:10
    }
  	render(){
    	return(
        	<div>有状态组件</div>
        )
    }
}

4.2 setState()修改状态

  • 状态是可变的
  • 语法：this.setState({要改变的数据})
  • 注意：不要直接修改state中的值，这是错误的！
  • 思想：数据驱动视图
//正确
//要修改哪一个就把哪一个传进来就可以，不会影响state其他数据
this.setState({
	count:this.state.count+1
})
//错误
this.state.count+=1