react基础 - 组件实例的三大核心属性-state

hibufan

已于 2022-07-10 19:19:26 修改

阅读量206

点赞数

分类专栏： # React 文章标签： react.js

于 2022-07-06 18:17:18 首次发布

本文链接：https://blog.csdn.net/qq_45903342/article/details/125632637

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

注意：在使用类创建组件才会有组件实例对象，从而才会有核心属性的概念~

state

1. 组件被称为"状态机"(组件里存着状态，状态里存数据), 页面的显示是根据组件的state属性的数据来显示（重新渲染组件），值是一个对象，可以包含多个key-value的组合
2. 初始化指定:

//借助构造器初始化状态 
constructor() {
      super()
      this.state = {
        stateName1 : stateValue1,
        stateName2 : stateValue2
      }
    }

3. 读取显示:
this.state.stateName1
4. 更新状态-->更新界面 : 内置API : setState传入一个对象
this.setState({stateName1 : newValue})

视频课中的一个demo

原生js的事件绑定三种方式：

在react中，把原生的onclick,onblur，封装为了 onClick ,onBlur，（为了更好的兼容性），且监听者必须是函数，，因此写法为：onClick={demo}

那么思考一下，如何在类中的自定义方法中拿到类的实例对象？拿到了实例才能拿到state，从而才能修改isHot的值----

bind可以做两件事 1.帮你生成一个新函数，不调用不执行 2.改变这个函数的this指向

此时将构造器中的this绑定到this.changeWeather上，，并把这个新函数放在实例身上，命名为changeWeather，，此时实例身上就多了一个changeWeather方法，，，再进行点击操作的时候，触发的方法就是实例自身的changeWeather方法，而非原型上的

总结一下思路---拿原型上的方法去生成新的方法并挂载到实例自身，调用的时候用的是自身的。

<body>
    //完整写法

    <!-- 准备一个容器 -->
    <div id="test"></div>

      <!-- 引入库 -->
      <script type="text/javascript" src="../js/react.development.js"></script>
      <script type="text/javascript" src="../js/react-dom.development.js"></script>
      <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
    //1. 创建类式组件
    class Weather extends React.Component{

        //构造器调用几次?----1  使用几次组件标签就产生了几个实例就调用几次
        constructor(props){
            super(props)
            // 初始化状态
            // 数据放状态里，更改数据驱动页面的修改
            this.state={isHot:false}
            this.changeWeather=this.changeWeather.bind(this)
        }

        //render调用几次?----1+n  1:初始化的时候调用  n:状态state更新的次数
        render() {
        //render是在类的原型对象上,供组件实例使用 
         const {isHot}=this.state
         return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}   </h1>
        }

        //changeWeather放在那了？--Weather的原型对象上，供实例使用
        //那么通过Weather的实例调用changeWeather时，changeWeather中的this就是Weather实例、
        // 类中自定义方法自动为局部的严格模式
        // changeWeather调用几次？  点几次调几次
        changeWeather(){
            // 获取isHot的值
            const isHot=this.state.isHot
            // ！！！状态里的数据不能直接更改，，react不认可，无法显示到页面
            // this.state.isHot=!isHot  错！
            // 借助内置API ---setState  来修改更新状态，且更新是一种合并，不是替换
            this.setState({isHot:!isHot})
        }
       
    }
    // 2.渲染组件到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'))

    </script>
</body>

<body>
    //简写！！！！开发中写法
  
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
    class Weather extends React.Component{
        // 初始化状态---类中写赋值语句直接放在实例身上
        state={isHot:false}
        render() {
         const {isHot}=this.state
         return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}   </h1>
        }
        //自定义方法-----赋值语句+箭头函数
        changeWeather=()=>{
            const isHot=this.state.isHot 
            this.setState({isHot:!isHot})
        }     
    }
    ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>
</body>

强烈注意：