阅读 17

React 类组件

什么是组件

能和其他物品组合起来的物件就叫做组件,在 Vue 中,一个构造选项就可以表示一个组件,而在React 中一个React元素返回的函数就是组件

创建方式

ES5(过时的)

由于 ES5 不支持 class,才用这种方式

import React from 'react'

const A=React.createClass({
	render(){
    	return (
        	<div>hi</div>
        )
    }
})
export default A
复制代码

ES6方式(推荐使用)

import React from 'react'

Class B extends React.Component{
	constructor(props){
    	super();
    }
	render(){
    	return (
        	<div>hi</div>
        )
    }
}
export default B
复制代码

props的使用

  1. 接受外部数据,可以直接读取属性 this.props.xxx,不能改写 props ,应该由数据的主人,也就是外部去修改
  2. 接受外部函数,可以在恰当的时机调用该函数,该函数一般是父组件的函数
import React from "react";

export default function App() {
  return (
    <div className="App">
      <Son say="我是儿子"/>
    </div>
  );
}

class Son extends React.Component{
  render(){
    return(
      <div>
        {this.props.say}
      </div>
    )
  }
}
复制代码

state的使用

使用 this.state 读,this.setState

import React from "react";

export default function App() {
  return (
    <div className="App">
      <Son/>
    </div>
  );
}

class Son extends React.Component{
  constructor(){
    super();
    this.state={
      n:0
    }
  }
  add(){
    this.setState(state=>{
      return {n:state.n+1}
    })
  }
  render(){
    return(
      <div>
        {this.state.n}
        <button onClick={()=>this.add()}>+1</button>
      </div>
    )
  }
}
复制代码

setState 注意事项

  • this.state.n+=1 无效?并不是,n 的值已经改变,只是 UI 没有更新,要调用 setState 才会触发更新(异步更新)
  • setState 会异步更新 UI,所以并不是马上改变,改完马上读取时无法读取成功的,推荐使用 setState 函数,如上面的例子
  • this.setState(this.state) 为什么不这样改,因为 React 希望我们不要去修改旧的 state(不可变数据)
  • setState 会自动合并第一层属性,但是不会合并第二层,可以使用 Object.assign 或者 ... 操作符

事件绑定

<button onClick={()=>{this.add()}>n+1</button>
// 推荐使用

<button onClick={this.add}>n+1</button>
// 不推荐,该 this.add 里的this会变成 window

<button onClick={this.add.bind(this)}>n+1</button>
// 不推荐,虽然解决了 this 问题,但是太麻烦

<button onClick={this.add}>n+1</button>
// this.add=()=>this.setState({n: this.state.n+1}),这样不如直接声明 add

<button onClick={this.add}>n+1</button>
// add=()=>this.setState({n: this.state.n+1}) 最好的写法

复制代码

生命周期

生命周期就是一个对象的生老病死。

  • constructor() 在这里初始化 state
  • shouldComponentUpdate() 是否阻止更新
  • render() 创建虚拟 DOM
  • componentDidMount() 组件出现在页面
  • componentDidUpdate() 组件已更新
  • componentWillUnmount() 组件将销毁

详解: 生命周期详解

文章分类
前端
文章标签