【react】初始react

---

前言

本文是react基础第二章，想要了解更多，可点进主页，查看第一章

---

一、组件

函数组件

function App(props){
	console.log('App属性：'props)
	//返回的JSX代表React元素
	return(
		<h1>函数组件-App组件，接受到的标题:{props.title}</h1>
		)
	}
	export default App

本质上是一个函数，在函数体内部返回需要渲染的React元素

import App fom './App'
//...
root.render(<App title="标题" />

以组件名作为自定义标签名称进行组件渲染
注意，组件名必须首字母大写（原因：babel在转译jsx时，是通过标签名首字母的大小写来区分自定义组件与html原生标签，如果首字母小写，则认为是html标签，否则是自定义的组件）

class组件
利用es6中的class来实现：

import React from 'react'
//class组件，继承自React.Component
class App extends React.Component{
	render(){
	return(
	<h2>React class 组件，接受到的属性:{this.props.title}</h2>
	)
  }
}
export default App

class组件要继承自React.Component父类，必须在类体中实现render()方法

二、推荐在react中一个超级好用的插件

三、React.Fragment

如果不想在最终渲染的DOM树中出现包裹的父节点，可使用<React.Fragment>进行包裹处理。可简写为<></>

<React.Fragment>
	<div>块级内容</div>
	<span>文本</span>
<React.Fragment>

<>
 <div>块级内容</div>
 <span>文本内容</span>
</>

四、State

state是class组件中组件自身要使用到的私有数据，可如下定义：

class App extends React.Compnent{
	state = {}//相当于构造器中this.state = {}
	render(){}
}

在类主体中定义的state属性，相当于在constructor()构造器中的简写。
注意：
1、要修改state中的状态数据，需要调用this.setState()方法来修改（这个方法是从父类中继承过来的），页面才会响应式重新渲染
2、setState()在修改状态数据时会进行状态数据合并（合并修改）
3、setState()可能是异步的

五、事件处理

在html标签中绑定事件

<div onclick="handler()"></div>

在react中，使用JSX渲染元素时，绑定事件与在html标签中绑定事件类似，但onXxx事件句柄使用时命名规范修改为驼峰命名规范:

<Button onClick={handler}></Button>

六、事件函数中的this指向问题

如果绑定的事件函数是普通函数表达式，则函数体内的this为undefined,所以要在事件函数中使用到this来引用组件实例，需要改变函数的this指向或使用箭头函数表示。

handleClick(){}
<button onClick={this.handleClick.bind(this)>添加</button>

handleClick=()=>{}
<button onClick={this.handleClick>添加</button>

七、表单处理

react没有vue中表单元素上使用的v-model来双向绑定(React不是MVVM的框架)，但可以利用v-model的原理来实现类似效果：

import React,{Component} from 'react'
export default class TodoInput extends Component{
	state = {inputValue:'abc'}
}
handleInputChange = (event) =>{
	this.setState({
			inputValue:event.target.value
			})
}
render(){
	return (
	<div className="todo-input">
		{this.state.inputValue} <br />
		<input
			type="text"
			placeholder="请输入新待办事项标题"
			value={this.state.inputValue}
			onChange={this.handleInputChange}
		/>
		)
	}
}

在表单元素上绑定value属性和侦听onChange事件

---

总结

以上就是react的基础内容，本文仅仅简单介绍了react的基础，若有不对的地方，请多多指教。