React-Start
岑畅
目录
一、JSX
（一）基本使用
1、React元素的属性名使用驼峰命名法
2、特殊属性名：class->className、for->htmlFor、tabindex->tabIndex
3、推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱
（二）在JSX中嵌入JS表达式
用{}包裹JS表达式
1、调用变量
const name = 'Bob'
const dv = (
<div>Hello, my name is {name}</div>
)2、调用函数
const isLoading = true
const loadData = () => {
return isLoading ? <div>Loading...</div> : <div>加载完成</div>
}
const alert = (
<div>{loadData()}</div>
)3、调用数组类型的数据
如果想要渲染一组数据，应该使用数组的map（）方法
注意：渲染列表时应该添加key属性，且key属性的值要保证唯一
原则：map()遍历谁，就给谁添加key属性
注意：尽量避免使用索引号作为key
const songs = [
{id: 1, name: '七楼'},
{id: 2, name: '不灭'},
{id: 3, name: '性空山'}
]
const list = (
<ul>
{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)二、组件
（一）函数组件
1、使用JS中的函数创建的组件叫做函数组件
2、函数组件必须有返回值
3、函数组件的名称必须以大写字母开头
4、使用函数的名字作为组件名
function Hello() {
return(
<div>Hello Components</div>
)
}
ReactDOM.render(<Hello/>, document.getElementById('root'))（二）类组件
使用ES6的class创建的组件
约定：1、类名称也必须以大写字母开头
2、类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
3、类组件必须提供render()方法
4、render()方法必须有返回值，表示该组件的结构
class Hello extends React.Component {
render() {
return (
<div>Hello Components</div>
)
}
}
ReactDOM.render(<Hello/>, document.getElementById('root'))（三）将组件抽离为独立的JS文件
1、创建Hello.js
2、在Hello.js中导入React
3、在Hello.js中创建需要的组件
4、在Hello.js中导出该组件
5、在index.js中import导入Hello组件
6、渲染组件
// Hello.js
import React from "react";
class Hello extends React.Component {
render() {
return (
<div>Hello Components</div>
)
}
}
export default Hello// index.js
import Hello from "../components/Hello";
ReactDOM.render(<Hello/>, document.getElementById('root'))三、事件
（一）事件绑定
1、React事件绑定语法与DOM事件语法相似
2、语法：on+事件名称={事件处理程序}， eg：onClick={ () => {} }
3、注意：React事件采用驼峰命名法，eg：onMouseEnter、onFocus
// 类中绑定事件
class Hello extends React.Component {
handleClick() {
console.log('单击事件触发')
}
render() {
return (
<div>
<div>Hello Components</div>
<button onClick={this.handleClick}>Button</button>
</div>
)
}
}// 函数中绑定事件
function APP() {
function handleClick() {
console.log('单击事件触发')
}
return(
<div>
<div>Hello Components</div>
<button onClick={handleClick}>Button</button>
</div>
)
}（二）事件对象
1、可以通过事件处理程序的参数获取到事件对象
2、React中的事件对象叫做：合并事件（对象）
3、合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
function handleClick(e) {
// 使用事件对象的方法阻止页面跳转
e.preventDefault()
console.log('事件对象', e)
}
<a onClick={handleClick}>点击此链接不会跳转</a>四、状态
（一）概念
1、函数组件又叫做无状态组件，类组件又叫做有状态组件
2、状态（state）即数据//类似于vue中的data
3、函数组件没有自己的状态，只负责数据展示（静）
4、类组件有自己的状态，负责更新UI，让页面“动”起来
（二）state的基本使用
1、状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
2、state的值是对象，表示一个组件中可以有多个数据
3、状态是自由的，只能在组件内部使用
class APP extends React.Component {
state = {
number: 0
}
render() {
return (
<div>
<h1>计数器：{this.state.number}</h1>
</div>
)
}
}（三）setState
使用setState方法对state中的值进行修改
class APP extends React.Component {
state = {
number: 0
}
render() {
return (
<div>
<h1>计数器：{this.state.number}</h1>
<button onClick={() => {
this.setState({
number: this.state.number+1
})
}}>+</button>
</div>
)
}
}（四）从JSX中抽离事件处理函数的方法
1、箭头函数
利用箭头函数自身不绑定this的特点
class APP extends React.Component {
state = {
number: 0
}
addNum() {
this.setState({
number: this.state.number+1
})
}
render() {
return (
<div>
<h1>计数器：{this.state.number}</h1>
<button onClick={() => this.addNum()}>+</button>
</div>
)
}
}2、Functionprotptype.bind()
利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
class APP extends React.Component {
state = {
number: 0
}
constructor() {
super()
this.addNum = this.addNum.bind(this)
}
addNum() {
this.setState({
number: this.state.number+1
})
}
render() {
return (
<div>
<h1>计数器：{this.state.number}</h1>
<button onClick={this.addNum}>+</button>
</div>
)
}
}3、class的实例方法
利用箭头函数形式的class实例方法
注意：该语法是实验性语法，但是由于babel的存在可以直接使用
class APP extends React.Component {
state = {
number: 0
}
addNum = () => {
this.setState({
number: this.state.number+1
})
}
render() {
return (
<div>
<h1>计数器：{this.state.number}</h1>
<button onClick={this.addNum}>+</button>
</div>
)
}
}五、表单处理
（一）受控组件
1、简介
- HTML中的表单元素是可输入的，也就是有自己的可变状态；而React中可变状态通常保存在state中，并且只能通过setState()方法来修改
- React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值（v-model）
<input typeof="text" value={this.state.number}/>2、步骤
- 在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
- 给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）
class APP extends React.Component {
state = {
txt: '' // 1、state中添加状态
}
handleChange = e => {
this.setState({
txt: e.target.value
})
}
render() {
return (
<div>
{/*2、绑定change事件*/}
<input type="text" value={ this.state.txt } onChange={ this.handleChange }/>
</div>
)
}
}3、 多表单元素优化步骤：
- 给表单元素添加name属性，名称与state相同
- 根据表单元素类型获取对应值
- 在change事件处理程序中通过[name]来修改对应的state
class APP extends React.Component {
state = {
txt: '',
content: '',
city: 'bj',
isCheck: false
}
handleChange = e => {
// 获取当前DOM对象
const target = e.target
// 根据类型获取值
const value = target.type==='checkbox' ? target.checked : target.value
// 获取name
const name = target.name
this.setState({
[name]: value
})
}
render() {
return (
<div>
{/*文本框*/}
<input type="text" name="txt" value={ this.state.txt } onChange={ this.handleChange }/>
{/*富文本框*/}
<textarea name="content" value={ this.state.content } onChange={ this.handleChange }/>
{/*下拉框*/}
<select name="city" value={ this.state.city } onChange={ this.handleChange }>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
</select>
{/*复选框*/}
<input type="checkbox" name="isChecked" value={ this.state.isChecked } onChange={ this.handleChange }/>
</div>
)
}
}（二）非受控组件（了解） // DOM方式
1、简介
- 说明：借助于ref，使用原生DOM方式来获取表单元素值
- ref的作用：获取DOM或组件
2、使用步骤
- 调用React.createRef()方法创建一个ref对象
- 将创建好的ref对象添加到文本框中
- 通过ref对象获取到文本框的值
class APP extends React.Component {
constructor() {
super();
// 创建ref
this.txtRef = React.createRef()
}
getTxt = () => {
console.log(this.txtRef.current.value);
}
render() {
return (
<div>
{/*文本框*/}
<input type="text" ref={this.txtRef}/>
<button onClick={this.getTxt}>获取文本框的值</button>
</div>
)
}
}
类似资料：