携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

➡️三大属性

🟪组件实例属性：state（状态）

状态是一个对象，内部的属性应以key:value的形式出现

案例：原本为今天天气很凉爽点击后在炎热与凉爽之前切换

状态初始化

给组件的state初始化

方法一：写构造器，在构造器内部初始化。

class Weather extends React.component{
  constructor(props){
     super(props);
     this.state = {isHot:true};
  }
}

  方法二：在类中初始化

class Weather extends React.component{
  state = {isHot:true};
}

绑定事件和更新状态

常用： (函数在类的内部）赋值语句=箭头函数

//自定义事件
changeWeather = ()=>{
 const isHot = this.state.isHot; //立即执行函数没有自己的this,此时的this指向类的实例化对象
 this.setState({isHot:!isHot});  //状态必须通过setState进行更新
};

//组件的渲染
render(){
   const {isHot} = this.state; //获取isHot变量的值
   return <h1 onClick={this.changeWeather}>今天的天气很{isHot?'凉爽':'炎热'}</h1>;
}

不常用：函数在类的外部，需要在类的构造器中改变this的指向

 class Weather extends React.component{
  constructor(props){
     super(props);
     this.state = {isHot:true};
     this.changeWeather = this.changeWeather.bind(this);
  }
}

changeWeather(){
 const isHot = this.state.isHot; //立即执行函数没有自己的this,此时的this指向类的实例化对象
 this.setState({isHot:!isHot});  //状态必须通过setState进行更新
}

整合


class Weather extends React.component{
  state = {isHot:true};

	 //自定义事件
	changeWeather = ()=>{
	 const isHot = this.state.isHot; //立即执行函数没有自己的this,此时的this指向类的实例化对象
	 this.setState({isHot:!isHot});  //状态必须通过setState进行更新
	};
	
	//组件的渲染
	render(){
	   const {isHot} = this.state; //获取isHot变量的值
	   return <h1 onClick={this.changeWeather}>今天的天气很{isHot?'凉爽':'炎热'}</h1>;
	}
}

ReactDOM.render(<Weather/>,document.getElementById("test"));

💜类式组件使用props（标签属性）

‼️注意：props是只读的，不能修改。state可以修改

基本使用⇒ 数据在渲染页面的时候写入

class Person extends React.component{
            render(){
                return(
                    <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>性别：{this.props.sex}</li>
                    <li>年龄：{this.props.age}</li>
                    </ul>
                )
            }
     }
//渲染页面并传入数据
 ReactDOM.render(<Person name="小明" age="19" sex='女'/>,document.getElementById("test"));

🤨如果觉得上述不太简洁，可以通过结构赋值的方法，获取属性

 render(){
const {age,name,sex}=this.props;
                return(
                    <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                    </ul>
                )
            }

经常用法 ⇒ 如果数据是对象的形式(属性名必须一样）

const p = {name="小明",age="19", sex='女'};
//渲染页面并传入数据
 ReactDOM.render(<Person {...p}/>,document.getElementById("test"));

案例：展示的时候每个人的年龄比数据提供的年龄大一岁

❎出错做法：

 render(){
const {age,name,sex}=this.props;
                return(
                    <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age+1}</li>
                    </ul>
                )
            }

结果是：19岁展示的时候变成191岁 ⇒ 变成了字符串拼接

原因：我传入的数据age="19" 中age的类型是字符串，所以传入的数据应该是number类型的。

改成age=19 就对了吗？不对，因为对象中必须以key : value 的形式传入，所以应该改成age={19}

对属性的数据类型进行限制

引入prop=types

<script type="text/javascript" src='js/prop-types.js'></script>

在类中对标签的属性进行限制(写在类里面）

💡注意：static关键字是为了使得该属性是给类自身加的，而不是给实例化对象加的

static propertype = {
   name:PropTypes.string.isRequired, //类型必须是字符串，且该参数是必须的
   sex:PropTypes.string
   age:PropTypes.number
   
}

对属性设置默认值

写在类里面。

static defualtProps = {
  sex:'男',
  age:18
}

💜函数式组件使用Props（标签属性）

1️⃣ 类式组件：通过标签传props，通过this.props在类中获取。

2️⃣ 函数式组件：通过标签传props，通过函数的参数在函数中获取。

写法

function Person (props){
                return(
                    <ul>
                    <li>姓名：{props.name}</li>
                    <li>性别：{props.sex}</li>
                    <li>年龄：{props.age}</li>
                    </ul>
                )
     }
//渲染页面并传入数据
 ReactDOM.render(<Person name="小明" age={19} sex='女'/>,document.getElementById("test"));

对props进行限制和初始化

注意：在函数外进行

Person.propertype = {
   name:PropTypes.string.isRequired, //类型必须是字符串，且该参数是必须的
   sex:PropTypes.string
   age:PropTypes.number 
}
Person.defualtProps = {
  sex:'男',
  age:18
}

🟣字符串形式的ref

ref的出现是为了选定所需的标签，代替原生js中的getElementById 。

例如：给标签打上ref属性后，该实例化对象的refs属性（类型是一个对象）中会出现这一对key：value .例如给input标签加上了ref为input1，则refs属性中会出现 input1: <input ref="input1" type="text" placeholder="点击按钮提示数据"></input> 。这样在类中通过this.refs.input1获取所需要的标签。

‼️虽然这样很简单，但字符串形式的ref现在已经不被提倡了

案例：点击button获取input中的数据

给按钮绑定点击事件的函数，给input标签绑定ref属性以便于获取其中的数据（value）

class Demo extends React.Component {
    showData = () => {
        alert(this.refs.input1.value);
    }
    render() {
        return (
            <div>
                <input ref="input1" type="text" placeholder="点击按钮提示数据"></input>
                <button onClick={this.showData}>点我提示左侧数据</button>
            </div>
        )
    }
}
ReactDOM.render(<Demo />, document.getElementById('root'));

🟣回调形式的ref

标签中：ref={c⇒ this.input1=c}
点击事件绑定函数中：const {input}=this; alert(input1.value);

🟣CreateRefs的使用

React.CreateRefs可以返回一个容器，该容器可以存储被refs所标识的节点。该容器是专人专用的。如果要给另一个标签加ref，需要再创建一个容器。

类中：创建一个容器MyRef = React.createRef();
点击事件绑定函数中：获取绑定该容器的标签的value（注意current不能少）alert(MyRef.current.value);
标签中：绑定对应的容器ref={this.MyRef}

具体代码

class Demo extends React.Component {

    MyRef = React.createRef();
    showData = () => {
        alert(this.MyRef.current.value);
    }
    render() {
        return (
            <div>
                <input ref={this.MyRef} type="text" placeholder="点击按钮提示数据"></input>
                <button onClick={this.showData}>点我提示左侧数据</button>
                <input type="text" placeholder="失去焦点提示数据"></input>
            </div>
        )
    }
}
ReactDOM.render(<Demo />, document.getElementById('root'));

➡️事件处理

通过event.target得到发生事件的DOM元素对象

案例：

输入框失去焦点后获取输入框内的value，所以数据的获取方和接收方是同一个标签，可以用这种方法。

class Demo extends React.Component {

    showData = (event) => {
        alert(event.target.value);
    }
    render() {
        return (
            <div>
                <input onBlur={this.showData} type="text" placeholder="失去焦点提示数据"></input>
            </div>
        )
    }
}
ReactDOM.render(<Demo />, document.getElementById('root'));

React的三大属性 最详细总结!