一、state
class MyComponent extends React.Component {
constructor(props) {
// 固定写法
super(props)
// 初始化state
this.state = { flag: true, manner: '你是对的' }
// bind() 返回一个被指定当前this的新函数
this.changeManner = this.changeManner.bind(this)
}
render() {
const { flag, manner } = this.state
return <h1 onClick={this.changeManner}>{flag ? manner : '我是错的'}</h1>
}
changeManner() {
const flag = this.state.flag
// state必须通过setState进行更新(指定值)
this.setState({ flag: !flag })
}
}
// 渲染虚拟DOM到页面
ReactDOM.render(<MyComponent />, document.getElementById('test'))
简化形式
class MyComponent extends React.Component {
state = { flag: true, manner: '你是对的' }
changeManner = () => {
const flag = this.state.flag
// state必须通过setState进行更新(指定值)
this.setState({ flag: !flag })
}
constructor(props) {
// 固定写法
super(props)
}
render() {
const { flag, manner } = this.state
return <h1 onClick={this.changeManner}>{flag ? manner : '我是错的'}</h1>
}
}
// 渲染虚拟DOM到页面
ReactDOM.render(<MyComponent />, document.getElementById('test'))
二、props
注意:props是只读的
class Person extends React.Component {
render() {
const { name, age, sex } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{age}</li>
<li>年龄:{sex}</li>
</ul>
)
}
}
1、基本使用
(1)属性形式
ReactDOM.render(<Person name="ouyuming" age={19} sex="男" />, document.getElementById('test'))
(2)对象形式
const p1 = { name: 'lxying', age: 18, sex: '男' }
ReactDOM.render(<Person {...p1} />, document.getElementById('test2'))
2、属性限制
(1)引入prop-types.js
<script type="text/javascript" src="../js/prop-types.js"></script>
(2)propTypes
类属性,对传入的prop进行类型限制
PropTypes, 验证器类
static propTypes = {
// 字符类型,必须传入
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
// 函数类型
study: PropTypes.func
}
(3)defaultProps
指定传入的prop默认值
static defaultProps = {
sex: '男',
age: 16
}
3、函数组件使用props
function Person(props) {
const { name, age, sex } = props
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{age}</li>
<li>年龄:{sex}</li>
</ul>
)
}
Person.propTypes = {
// 字符类型,必须传入
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
// 函数类型
study: PropTypes.func
}
Person.defaultProps = {
sex: '男',
age: 16
}
ReactDOM.render(<Person name="wanger" />, document.getElementById('test'))
三、refs
1、字符串形式的ref
class MyComponent extends React.Component {
show1 = () => {
const { input1 } = this.refs
console.log(input1)
}
show2 = () => {
const { input2 } = this.refs
console.log(input2)
}
render() {
return (
<div>
<input onBlur={this.show1} type="text" ref="input1" placeholder="input1" />
<br />
<input onBlur={this.show2} type="text" ref="input2" placeholder="input2" />
</div>
)
}
}
ReactDOM.render(<MyComponent />, document.getElementById('test'))
2、回调韩式形式的ref
(1) 内联函数
在更新过程中它会被执行两次,第一次传入参数 null
,然后第二次会传入参数 DOM 元素
show1 = () => {
const { input1 } = this
console.log(input1)
}
show2 = () => {
const { input2 } = this
console.log(input2)
}
render() {
return (
<div>
<input onBlur={this.show1} type="text" ref={e => (this.input1 = e)} placeholder="input1" />
<br />
<input onBlur={this.show2} type="text" ref={e => (this.input2 = e)} placeholder="input2" />
</div>
)
}
(2) class 的绑定函数
show1 = () => {
console.log(this.input1)
}
save = e => {
this.input1 = e
console.log(this.input1)
}
render() {
return (
<div>
<input onBlur={this.show1} type="text" ref={this.save} placeholder="input1" />
</div>
)
}
3、createRef()
myRef1 = React.createRef()
myRef2 = React.createRef()
show1 = () => {
console.log(this.myRef1.current)
}
show2 = () => {
console.log(this.myRef2.current)
}
render() {
return (
<div>
<input onBlur={this.show1} type="text" ref={this.myRef1} placeholder="input1" />
<br />
<input onBlur={this.show2} type="text" ref={this.myRef2} placeholder="input2" />
</div>
)
}