react学习笔记其二 | 青训营

用户4542635412197
49 阅读2分钟

渲染类组件标签的基本流程

React内部会创建组件实例对象

调用render()得到虚拟DOM, 并解析为真实DOM

插入到指定的页面元素内部

组件三大核心属性

1: state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

注意

组件中render方法中的this为组件实例对象

组件自定义的方法中this为undefined，如何解决？

a)强制绑定this: 通过函数对象的bind()

b)箭头函数

状态数据，不能直接修改或更新，必须使用setState

实践案例

需求：

定义一个展示天气信息的组件

1.默认展示天气炎热 或 凉爽

2.点击文字切换天气

<script type="text/babel">
  class Weather extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isHot: true };
      this.changeWeather = this.changeWeather.bind(this);
    }
    render() {
      return (
        <h2 onClick={this.changeWeather}>
          今天天气很{this.state.isHot ? "炎热" : "凉爽"}
        </h2>
      );
    }
    changeWeather() {
      const isHot = this.state.isHot;
      this.setState({ isHot: !isHot });
    }
  }
  ReactDOM.render(<Weather />, document.getElementById("test"));
</script>

组件三大核心属性2: props

每个组件对象都会有props(properties的简写)属性

组件标签的所有属性都保存在props中

作用

通过标签属性从组件外向组件内传递变化的数据

注意: 组件内部不要修改props数据，因为props是只读的

编码操作

1.内部读取某个属性值

this.props.name

2.对props中的属性值进行类型限制和必要性限制

3.扩展属性: 将对象的所有属性通过props传递

4.默认属性值

5.组件类的构造函数

构造器中是否接受props，是否传递给super，取决于：是否需要在构造器中通过this访问props

组件三大核心属性3: refs与事件处理

组件内的标签可以定义ref属性来标识自己

事件处理

通过onXxx属性指定事件处理函数(注意大小写)

a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——为了更好的兼容性

b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了高效

通过event.target得到发生事件的DOM元素对象——不要过度的使用ref

组件的生命周期

组件从创建到死亡它会经历一些特定的阶段。

React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。

我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

初始化阶段: 由ReactDOM.render()触发—初次渲染

1.constructor()

2.componentWillMount()

3.render()

4.componentDidMount() 常用，一般在该钩子中做一些初始化的事，例如：开启定时器，发送网络请求，订阅消息

更新阶段: 由组件内部this.setSate()或父组件重新render触发

1.shouldComponentUpdate()

2.componentWillUpdate()

3.render()

4.componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1.componentWillUnmount() 常用，一般在该钩子中做一些收尾的事，例如：关闭定时器，取消订阅消息

avatar
文章
阅读
粉丝