React02_面向组件编程2.1_组件实例的三大核心属性_state

2.2 组件实例的三大核心属性1: state

• 详细版

// 1. 创建组件
class Weather extends React.Component{
    
    
    // 构造器调用几次？ —— 几个Weather实例，调用几次   1
    constructor(props) {
    
    
        console.log('constructor');
        super(props);
        // 初始化状态
        this.state = {
    
    
            isHot : true,
            wind : '微风'
        };
	
        // 解决changeWeather中this指向问题
        this.changeWeather = this.changeWeather.bind(this);
    }
    
    // changeWeather调用几次 ? —— 点几次调几次
    // 方法三
    changeWeather(){
    
    
        console.log('changeWeather');

        // 放在 weather原型对象上，供实例使用
        // 由于changeWeather是作为OnClick的回调，所以不是实例调用，是直接调用
        // 类中的方法默认开启局部的严格模式，所以 changeWeather 中的this为undefined
        console.log(this);  // undefined
        
        console.log("此处修改isHot值");
        // 获取原来的isHot值
        const isHot = this.state.isHot;

        // NOTICE ： 状态不可直接更改，下面这行就是直接更改！！！！
        // this.state.isHot = !this.state.isHot;  错误写法
        // 更新是一种合并，不是替换
        this.setState({
    
    
            isHot : !isHot
        })
        console.log(this.state.isHot);
    }

    // render 调用几次？ —— 1+n次
    render(){
    
    
        console.log('render');
        return <h1 onClick={
    
    this.changeWeather} id='title'>今天天气很{
    
    this.state.isHot ? '炎热' : '凉爽'}, {
    
    this.state.wind}</h1>
    }
}

// 2. 渲染组件到页面
ReactDOM.render(<Weather/>, document.getElementById('container'))

// 方法一：（不推荐）
/* const title = document.getElementById('title');
        title.addEventListener('click', ()=> {
            console.log('标题被点击');
   }) */
// 方法二：不推荐
/* title.onclick = () => {
            console.log('标题被点击了2');
   } */

• 精简版

// 1. 创建组件
class Weather extends React.Component{
    
    
    // 初始化状态
    state = {
    
    
        isHot : true,
        wind : '微风'
    };
 	// 自定义方法
    changeWeather = ()=>{
    
    
        console.log(this);
        const isHot = this.state.isHot;
        this.setState({
    
    
            isHot : !isHot
        })
	}

    render(){
    
    
        const {
    
    isHot, wind} = this.state;
        return <h1 onClick={
    
    this.changeWeather} id='title'>今天天气很{
    
    isHot ? '炎热' : '凉爽'}, {
    
    wind}</h1>
    }
}

// 2. 渲染组件到页面
ReactDOM.render(<Weather/>, document.getElementById('container'))

• 理解
  • state 是组件对象最重要的属性，值是对象
  • 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）
• 强烈注意
  • 组件中render方法中的this为组件实例对象
  • 组件自定义的方法中this为Undefined, 如何调用？
    • 强制绑定 this : bind()
    • 箭头函数
  • 状态数据，不能直接修改或更新

2.2_补充

• 原生JS点击事件

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button onclick="demo()">按钮3</button>

<script>
    const btn1 = document.getElementById('btn1');
    btn1.addEventListener('click', ()=> {
      
      
        alert('按钮1被点击')
    })

    const btn2 = document.getElementById('btn2');
    btn2.onclick = ()=>{
      
      
        alert('按钮2被点击');
    }

    function demo(){
      
      
        alert('按钮3被点击');
    }
</script>

• bind

function demo(){
    
    
    console.log(this);
}
demo(); // this : window

// 直接调用
const x = demo.bind({
    
    a:1, b:2})
x(); // Object

• 类中this指向

class Person{
    
    
    constructor(name, age){
    
    
        this.name = name;
        this.age = age;
    }
    speak (){
    
    
        // speak放在了类的原型对象上，供实例使用
        // 通过Person实例调用speak时，speak中的this就是person实例
        console.log(this);
    }
}

const p1 = new Person('tom', 10);
p1.speak(); // this —— person

const x = p1.speak;
// 直接调用
x(); // this —— undefined

• 类的知识

class Car {
    
    
    constructor (name, price){
    
    
        this.name = name;
        this.price = price;
    }
    // 类中可以直接写赋值语句，如下代码含义是：给Car 的实例对象添加一个属性，名为wheel, 值为4
    wheel = 4;
}
const c1 = new Car('奔驰', 199);
const c2 = new Car('宝马', 199);
console.log(c1);
console.log(c2);