React的组件
组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
一个React应用就是由一个个的组件组成的
创建组件的两种方式
函数组件
不能定义状态
function Header(){
return <div>我是标题组件</div>
}
// 函数名就是组件名
ReactDom.render(<Header></Header>, document.getElementById('root'))
// 注意:
1. 组件名首字母必须大写. 因为react以此来区分组件和react元素
2. 必须有返回值.返回的内容就是组件呈现的结构, 如果返回值为 null，表示不渲染任何内容
3. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签
类组件
可以定义状态(状态: 组件内部私有的数据)
class Header extends React.Component{
render(){
return <div>我是标题组件</div>
}
}
// 如果组件没有子节点,也可以写成自闭和标签
ReactDom.render(<Header />, document.getElementById('root'))
//注意:
1. 组件名首字母必须大写.
2. 类组件中必须要声明一个render函数
3. render函数中必须有返回值.
4. 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
5. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签
组件的状态 state
函数组件又叫做无状态组件，类组件又叫做有状态组件
状态（state）即数据
函数组件没有state,一般只负责渲染静态结构
类组件有自己的状态，负责更新 UI，让页面“动” 起来
state的基本使用
-
状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
-
state 的值是对象，表示一个组件中可以有多个数据
-
获取状态：this.state
class Hello extends React.Component { constructor() { super() this.state = { count: 0 } // 初始化state } // 简化语法 // state= { count: 0 } render() { return ( <div>{this.state.count}</div> ) } }
操作state
语法：this.setState({ 要修改的数据 })
注意：不要直接修改 state 中的值，应该使用组件实例的setState方法,修改state的值
setState() 作用：
-
修改 state
-
更新UI
class Hello extends React.Component { constructor() { super() this.state = { count: 0, num: 100 }// 初始化state } render() { return ( <div onClick={() => { this.setState({count: this.state.count + 1})}}> {this.state.count} </div> ) } }
setState的注意点
-
连续调用合并问题
handle = () => { this.setState({ count: this.state.count + 1 }) this.setState({ count: this.state.count + 2 }) this.setState({ count: this.state.count + 3 }) } // 连续调用.react会将多次合并成一次. 最终执行的是最后一次 -
setState第一个参数传入函数
state = {count:0} // 第一个参数除了可以像之前一样传入一个对象之外,还可以传入一个函数.如下 // 这个函数,接收一个最新的state和最新的props // 函数要求返回一个对象 this.setState((state, props) => { return { count: state.count + 1 } }) this.setState((state, props) => { return { count: state.count + 2 } }) this.setState((state, props) => { return { count: state.count + 3 } }) // 最终状态中count的结果是 6 -
setState将对组件 state 的更改排入队列,所以调用之后,立刻获取this.state拿到的值很有可能是错误的
state = {count:0} this.setState((state, props) => { return { count: state.count + 1 } }) this.setState((state, props) => { return { count: state.count + 2 } }) this.setState((state, props) => { return { count: state.count + 3 } }) // 这里获取到的state中count的值就是错误的 console.log(this.state.count) // 0 -
setState的第二个可选参数
// 如果想要在setState之后立刻得到最新的state. 可以使用第二个可以选参数 this.setState( (state, props) => {}, //它将在 setState 完成合并并重新渲染组件后执行 () => {console.log(this.state)} )
事件绑定this的指向问题
为了提高代码的阅读性,最好把事件处理函数定义在结构的外面.
但是这样就带来了this指向的问题:
handle中的this 指向 undefined (原因: bable编译jsx. 采用的是严格模式, 普通函数this就指向undefined)
class Hello extends React.Component {
constructor() {
super()
this.state = { count: 0, num: 100 }// 初始化state
}
handle() {
//这里this指向undefined
this.setState({
count: this.state.count + 1
})
}
render() {
return <div onClick={this.handle}>{this.state.count}</div>
}
}
1.解决this指向 - 箭头函数
class Hello extends React.Component {
constructor() {
super()
this.state = { count: 0, num: 100 }// 初始化state
}
handle() {
//这里this指向当前组件实例
this.setState({
count: this.state.count + 1
})
}
render() {
// 解决方式1: 箭头函数
return <div onClick={（）=> this.handle()}>{this.state.count}</div>
}
}
2.解决this指向 - bind
class Hello extends React.Component {
constructor() {
super()
this.state = { count: 0, num: 100 } // 初始化state
//解决方式2: bind
this.handle = this.handle.bind(this)
}
handle() {
//这里this指向当前组件实例
this.setState({
count: this.state.count + 1
})
}
render() {
return <div onClick={this.handle}>{this.state.count}/div>
}
}
3.解决this指向 - 类的实例方法
class Hello extends React.Component {
constructor() {
super()
this.state = { count: 0, num: 100 } // 初始化state
}
// 解决方式3: 类的实例 (注意:这种语法形式目前处于试验性阶段.但是由于使用了babel,可以放心使用)
handle = () => {
//这里this指向当前组件实例
this.setState({
count: this.state.count + 1
})
}
render() {
return <div onClick={this.handle}>{this.state.count}/div>
}
}
组件的props
组件是封闭的，要接收外部数据应该通过 props 来实现
props的作用：接收传递给组件的数据
传递数据：给组件标签添加属性
接收数据：函数组件通过参数props接收数据，类组件通过 this.props 接收数据
<Hello name="jack" age={19} />
function Hello(props) {
console.log(props)
return (
<div>接收到数据：{props.name}</div>
)
}
class Hello extends React.Component {
render() {
return (
<div>接收到的数据：{this.props.age}</div>
)
}
}
props的特点:
-
可以给组件传递任意类型的数据
-
props 是只读的对象，只能读取属性的值，不要修改props
-
注意：使用类组件时，如果写了构造函数，应该将 props 传递给 super()，否则，无法在构造函数中获取到 props
class Hello extends React.Component { constructor(props) { // 推荐将props传递给父类构造函数 super(props) } render() { return <div>接收到的数据：{this.props.age}</div> } }
props校验
对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据
如果传入的数据格式不对，可能会导致组件内部报错
关键问题：组件的使用者不知道明确的错误原因
允许在创建组件的时候，就指定 props 的类型、格式等
作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性
实现方式:
-
导入 prop-types 包
-
使用propTypes来给组件的props添加校验规则
//常见类型：array、bool、func、number、object、string还有element(react元素) // 必填项：isRequired // 特定结构的对象：shape({ }) import PropTypes from 'prop-types' class Hello extends React.Component(){ static propTypes = { msg: PropTypes.string.isRequired list: PropTypes.array obj: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }) } render(){ return <div msg="props校验" ></div> } }
props默认值
作用：给 props 设置默认值，在未传入 props 时生效
实现方式:
function App(props) {
return (
<div>
此处展示props的默认值：{props.pageSize}
</div>
)
}
// 设置默认值
App.defaultProps = {
pageSize: 10
}
// 不传入pageSize属性
<App />
表单处理
受控组件
HTML 中的表单元素是可输入的，也就是有自己的可变状态.而React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改 .React将 state 与表单元素值value绑定到一起，由 state 的值来控制表单元素的值
受控组件：其值受到 React 控制的表单元素
实现方式:
-
在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
-
给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）
class Hello extends React.Component { constructor() { super() this.state = { text: '' } // 初始化state } handle = e => { //这里this指向当前组件实例 this.setState({ text: e.target.value }) } render() { return <input onChange={this.handle} value={this.state.text}></input> } } //补充: 文本框、文本域、下拉框 操作value属性 复选框 操作checked属性
多表单元素处理
利用柯里化函数实现
柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
class Hello extends React.Component {
state = {
msg: '文本框',
area: '文本域',
selected: 'sj',
checked: false
}
// 这是文本框, 文本域, 以及下拉选择共同使用的事件处理函数
handle = name => {
return e => {
// 判断 当前事件目标是不是复选框,如果是,使用checked, 如果不是,使用value
let value = name === 'checked' ? e.target.checked : e.target.value
this.setState({
[name]: value
})
}
}
render() {
return (
<div>
{/* 文本框 */}
<input
type='text'
value={this.state.msg}
onChange={this.handle('msg')}
/>
<br />
{/* 文本域 */}
<textarea
id=''
cols='30'
rows='10'
value={this.state.area}
onChange={this.handle('area')}
></textarea>
<br />
{/* 下拉框 */}
<select
name='selected'
value={this.state.selected}
onChange={this.handle('selected')}
>
<option value='cf'>吃饭</option>
<option value='sj'>睡觉</option>
<option value='ddd'>打豆豆</option>
</select>
<br />
{/* 复选框 */}
<input
type='checkbox'
checked={this.state.checked}
onChange={this.handle('checked')}
/>
</div>
)
}
}
非受控组件
借助于 ref，使用原生 DOM 方式来获取表单元素值
ref 的作用：获取 DOM 或组件
实现方式:
-
调用 React.createRef() 方法创建一个 ref 对象
constructor() { super() this.txtRef = React.createRef() } -
将创建好的 ref 对象添加到文本框中
<input type="text" ref={this.txtRef} /> -
通过 ref 对象获取到文本框的值
Console.log(this.txtRef.current.value)
上一篇：React基本语法
下一篇：React组件的生命周期
6419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
