组件的声明和渲染
组件的声明有两种方式:
- 工厂函数组件(简单组件)
function MyComponent() {
return <h2>工厂函数组件(简单组件)</h2>
}
- ES6 类组件(复杂组件)
class MyComponent2 extends React.Component {
// 构造函数待会用
// constructor() {}
render() {
return <h2>ES6 类组件(复杂组件)</h2>
}
}
组件的渲染,注意:对象的名字就是组件的名字
ReactDOM.render(<MyComponent />, document.getElementById('app'))
组件的三大属性
props
props
是组件接收的参数,和 Vue 组件中的 props
概念一致。另外,React 中的组件和 Vue 一样,是可以嵌套使用的,这样就需要在组件中进行传值。同样,React 也是利用了 props
属性来进行组件传值。还有一点值得注意的是,在一个组件中,它自身的 props
只能被读取,不能被更改。
综上,React 的 props
和 Vue 中的除了语法不同,其余几乎一模一样。
编码操作
- 读取
this.props.propertyName
- 默认属性值
Props.defaultProps = {
prop1: val
}
- 传入参数
在传参时可以使用 ES6 的解构赋值,注意:这里p1
的属性名应该等同于props
中的属性值
let p1 = {
name: '张三',
age: 18,
sex: '男'
}
<Props {...p1} />
state
组件除了一味的接受父组件中的参数外,还需要它自身的属性,于是就有了 state
。state
是组件对象中最重要的属性,被称为“状态机”,通过更新组件的 state
来更新对应的页面显示。值是对象(可以包含多个数据)。概念类似于 Vue 组件中的 data
,但是 state
还可以包括方法。
注意:只要组件有状态,就不能用工厂模式声明。
编码操作
- 初始化状态
constructor (props) {
super(props)
this.state = {
state.Prop1: value1,
state.Prop2: value2
}
}
- 读取某个状态值
this.state.statePropertyName
- 更新状态 — 组件界面更新
this.setState({
stateProp1: value1,
stateProp2: value2
})
案例解析
描述:点击文案进行切换
class State extends React.Component {
constructor(props) {
super(props)
// 初始化state
this.state = {
flag: false
}
// 强制改变新增方法中的this指向
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
console.log(this) // undefined
// 新增方法中的this指向undefined,不指向组件对象
const { flag } = this.state
this.setState({
flag: !flag
})
}
render() {
// this 指向 State
// 读取 state
const { flag } = this.state
return <h2 onClick={this.handleClick}>{flag ? 'true??' : 'false!!'}</h2>
}
}
refs
refs
的作用类似于 id
,都是给标签加一个标识,方便执行操作的时候更好找到对象:
编码操作
- 声明
使用refs
之前需要现在标签上声明:
<input type="text" ref={ input => this.refName = input }/>
注意:{}
里的 input
需要是标签名
- 使用
在组件内,通过this.refName
直接获取到目标对象,这里的refName
随意取名
事件处理
React 中的事件名和 JS 原生事件名一样,但是使用小驼峰命名法来命名的,例如:
onclick
==>onClick
onchange
==>onChange