State&生命周期学习

到目前为止我们只学习了一种方法来更新UI。
我们调用 ReactDOM.render()方法来改变输出。
这一节,我们在前面的基础上,如何将之前的例子变成可重用的组件。
先回顾一下之前的方法:

function Clock(props) {
  return (
    

Hello, world!

It is {props.date.toLocaleTimeString()}.

); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000);

理想情况下,Clock更细自己的UI应该是自己内部的事情,他能够自己更新自己的UI。
为了实现这个需求,我们需要为Clock组件添加状态
状态与属性十分相似,但是状态是私有的,完全受控于当前组件。

把函数变成类

1.创建一个名称扩展为 React.Component的ES6类
2.创建一个叫做render()的空方法
3.将函数体移动到 render()方法中
4.在 render()方法中,使用 this.props替换 props

export class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date()
    }
  }
  render() {
    return (
      

Hello,{this.props.name}

It is {this.state.date.toLocaleTimeString()}

) } }

这里我是在自己本地运行的一个react的环境,在对应的文件写了一个组件。你们也可以在自己本地安装环境,这样学习起来也比较方便:

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

然后就可以开始了。
现在我们定义了一个类,使用类就允许我们使用其它特性,例如局部状态、生命周期钩子。
代码中,我们是使用构造函数的方法来初始化组件的状态以及传递props的。
建议大家在学习前还是了解一下类的概念比较容易理解。

接下来我们为组件添加定时器,来更新时间。

将生命周期函数添加到类中

在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要。
每当组件第一次加载到DOM中的时候,这在React中被称为挂载
同样,每当组件生成的这个DOM被移除的时,这在React中被称为卸载。
我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码:

export class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date()
    }
  }
  componentDidMount() {
   
  }
  componentWillUnmount() {
   
  }
  render() {
    return (
      

Hello,{this.props.name}

It is {this.state.date.toLocaleTimeString()}

) } }

这些方法被称作生命周期钩子。
当组件输出到 DOM 后会执行 componentDidMount()钩子,这是一个建立定时器的好地方:

componentDidMount() {
    this.timerId = setInterval(
      () => this.tick(),
      1000
    )
  }

注意我们如何在 this 中保存定时器ID。
虽然 this.props 由React本身设置以及this.state 具有特殊的含义,但如果需要存储不用于视觉输出的东西,则可以手动向类中添加其他字段。
如果你不在 render() 中使用某些东西,它就不应该在状态中。
我们将在 componentWillUnmount()生命周期钩子中卸载计时器:

componentWillUnmount() {
    clearInterval(this.timerID);
  }

更新组件局部状态

我们使用用 this.setState()来更新组件局部状态:

tick() {
    this.setState({
      date: new Date()
    })
  }

最后,我们实现了每秒钟执行的 tick() 方法。然后组件每一秒就会更新自己的状态。现在,现在时钟每秒钟都会执行。
关于 setState():

  • 不要直接更新状态,应当使用 setState()
  • 构造函数是唯一能够初始化 this.state 的地方。
  • 状态更新合并,这里的合并是浅合并,当你更新一个状态时,其余的状态保持不变。

数据单向流动

父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。
这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外,其它组件不可访问。
组件可以选择将其状态作为属性传递给其子组件,这也适用于用户定义的组件:


FormattedDate 组件将在其属性中接收到 date 值,并且不知道它是来自父组件 状态、还是来自 父组件的属性、亦或手工输入:

function FormattedDate(props) {
  return 

It is {props.date.toLocaleTimeString()}.

; }

这通常被称为自顶向下或单向数据流。
为了表明所有组件都是真正隔离的,我们可以创建一个 App 组件,它渲染三个Tick

export class App extends Component {
  render() {
    return (
      
); } }

每个 Tick建立自己的定时器并且独立更新。

State&生命周期学习_第1张图片
效果图

你可能感兴趣的:(State&生命周期学习)