React组件及其三大属性
2.React组件及其三大属性
2.1函数式组件
function Demo(){
console.log(this)
return <h2> 函数式组件</h2>
}
// ReactDOM.render(Demo(), document.getElementById('test'))
ReactDOM.render(<Demo />, document.getElementById('test'))
2.2类式组件
class MyComponent extends React.Component {
render(){
console.log('render中的this: ', this)
return (
<h2>类式组件</h2>
)
}
}
ReactDOM.render(<MyComponent />, document.getElementById('test'))
2.3使用state属性及简写方式
class Weather extends React.Component {
// 构造器调用几次？ --------- 1次
constructor(props) {
super(props);
// 解决handClick中this的指向, 将this指向绑定到当前实例
this.handClick = this.handClick.bind(this)
this.state = {
isHot: true,
wind: '微风'
}
}
// handClick调用几次？ ----- 点击一次调用一次
handClick() {
// 类中的方法默认开启了严格模式
// handClick是在Weather类原型上，供实例使用
// 由于handClick作为onClick的回调，所以不是通过实例调用，而是直接调用,所以this为undefined
console.log(this)
this.setState({
isHot: !this.state.isHot
})
}
// render调用几次？ --- 1+n次
// 1:初始化一次， n:状态更改就调用
render() {
const {isHot, wind} = this.state
return (
<h2 onClick={this.handClick}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h2>
)
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
state简写方式：
class Weather extends React.Component {
// state简写方式
state = {
isHot: true,
wind: '微风'
}
// 自定义方法 ---- 要用赋值语句的形式+箭头函数
// 使用箭头函数是因为其内部this会指向外层的this
handClick = () => {
console.log(this)
this.setState({
isHot: !this.state.isHot
})
}
render() {
console.log(this)
const {isHot, wind} = this.state
return (
<h2 onClick={this.handClick}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h2>
)
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
2.4 props属性
基本使用
class Person extends React.Component {
constructor(props) {
// 构造器是否接收props, 是否传递给super,取决于：是否希望在构造器中通过this访问props
super(props);
console.log('constructor:', this.props)
}
render(){
// console.log(this)
// 通过结构赋值接收传递参数
const {name, age, gender} = this.props
// props是只读的
// this.props.name = 'jack' // 报错，只读不可修改
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{gender}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
// 对标签属性进行类型、必要性的检测
Person.propTypes = {
name: PropTypes.string.isRequired, // 限制name为字符串类型且必填
gender: PropTypes.string,
age: PropTypes.number,
speak: PropTypes.func,
}
// 指定默认标签属性值
Person.defaultProps = {
gender: '药拐',
age: 18
}
ReactDOM.render(<Person age={19} gender="man" speak={speak}/>, document.getElementById('test'))
ReactDOM.render(<Person name="wiki" age={18} gender="woman"/>, document.getElementById('test1'))
const p = {name: 'jack', age: 18, gender: 'woman'}
// 通过...运算符解压赋值传递给Person组件
ReactDOM.render(<Person {...p} />, document.getElementById('test2'))
类的静态属性方式限制：
// 对标签属性进行类型、必要性的检测
// static添加类的属性
static propTypes = {
name: PropTypes.string.isRequired, // 限制name为字符串类型且必填
gender: PropTypes.string,
age: PropTypes.number,
speak: PropTypes.func,
}
// 指定默认标签属性值
static defaultProps = {
gender: '药拐',
age: 18
}
函数式组件使用props
function Person(props){
const {name, age, gender} = props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{gender}</li>
<li>年龄：{age}</li>
</ul>
)
}
ReactDOM.render(<Person name='jerry' age={19} gender="man" />, document.getElementById('test'))
2.5 ref属性
1.字符串形式：
class Demo extends React.Component {
showData = () => {
const {input1} = this.refs
alert(input1.value)
}
showData2 = () => {
// 字符串形式通过this.refs获取
const {input2} = this.refs
alert(input2.value)
}
render(){
return (
<div>
<label>
<input ref="input1" type="text" placeholder="点击按钮显示数据" />
</label>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点显示数据" />
</div>
)
}
}
ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
2.回调函数形式
class Demo extends React.Component {
showData = () => {
// 通过解构赋值取出ref
const {input1} = this
alert(input1.value)
}
showData2 = () => {
const {input2} = this
alert(input2.value)
}
render(){
return (
<div>
<label>
{/* 将当前事件绑定到this.input1上 */}
<input ref={(c) =>{this.input1 = c}} type="text" placeholder="点击按钮显示数据" />
</label>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={(c) =>{this.input2 = c}} type="text" placeholder="失去焦点显示数据" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
- createRef的使用
class Demo extends React.Component {
/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
*/
myRef = React.createRef()
myRef2 = React.createRef()
showData = () => {
console.log(this.myRef.current)
alert(this.myRef.current.value)
}
showData2 = () => {
console.log(this.myRef2.current)
alert(this.myRef2.current.value)
}
render(){
return (
<div>
<label>
<input ref={this.myRef} type="text" placeholder="点击按钮显示数据" />
</label>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点显示数据" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
