ReactJS - 04 - ReactJS之入门之02之 Component 组件元素的状态

ReactJS - 04 - ReactJS之入门之02之 Component 组件元素的状态

前面已经讲到，组件元素被解析后的本质是一个 javascript DOM 对象。但是它只作为这个组件的一部分：作为结果的输出。

组件元素还有其它的属性，例如：state 属性，就是本节要讨论的。


一、元素组件的 this.state 属性

ReactJS 里，只需更新组件的 state 属性，它就会根据新的 state ，重新渲染用户界面（不需要操作 DOM）—— 达到动态更新的目的。


注意：
更新 state 属性应使用 ReactJS 提供的：setSate() 方法。


二、举例


    1、使用 this.state 属性
    以下实例创建一个类，继承 React.Component 。在 render() 方法中使用 this.state ，用以来修改当前的时间。

<script type="text/babel">
class Clock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {date: new Date()};

    // 使用 setState() 方法更新 state 属性。
    setInterval(()=>{
        this.setState({
            date: new Date()
        });
    }, 1000);
  }
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);
</script>

    2、了解组件元素的生命周期函数：componentDidMount() / componentWillUnmount()

    在具有许多组件的应用程序中，在组件销毁时，释放组件所占用的资源非常重要。

    上面的写法虽然实现了基础的功能性要求，但是却存在一个问题：如果组件被移除之后，interval 方法仍在持续运行。这是不行的，内存会占有越来越多。


    componentDidMount()： 在 React 中被称为挂载，于组件第一次加载到 DOM 中的时候执行。
    componentWillUnmount()： 在 React 中被称为卸载，于组件生成的 DOM 被移除的时候执行。

    优雅的写法：

<script type="text/babel">
class Clock extends React.Component {

    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }

    componentDidMount() {
        this.timerID = 
            setInterval(() => {
                this.setState({
                    date: new Date()
                });
            }, 1000);
    }

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

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}
 
ReactDOM.render(
    <Clock />,
    document.getElementById('example')
);
</script>

    3、多个组件嵌套，组件的更新问题 —— 组件中数据的共享及流向

    组件的状态（this.state)真好用啊，它可以使组件动态的更新内容。但是，如果一个组件由多个子组件组成的时候呢？而子组件又使用了顶层组件的属性。此时若顶层组件的属性发生变化，也需要子组件更新其 state 属性吗？

    回答：不必这么麻烦。
    这得益于 ReactJS 中数据是自顶向下单向流动的。任何状态始终由某个特定组件所有，但可被其子组件所共享，并且从该状态导出的任何数据或 UI 会且只会影响组件树中下方组件的状态的更新。

    方法：
    父组件中：使用 state 作为子组件的 props 属性将值传递到子组件上。
    子组件中：1.如果子组件是单纯的 function，则可以直接使用 props.xxx
            2. 如果子组件继承了 React.Component，则使用 this.props.xxx
   

    下例中父组件 Clock 包含一个子组件 FormattedDate。由于父组件 Clock 的 state 属性被（导出）子组件引用，此时只需更新父组件的 state 属性值，子组件渲染的页面就会得到相应的更新。

<script type="text/babel">

//子组件 1
function FormattedDate1 (props) {
    return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
}

//子组件 2
class FormattedDate2 extends React.Component {
  render() {
    return (
      <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
    );
  }
}



//父组件
class Clock extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }

    componentDidMount() {
        this.timerID = 
          setInterval(() => {
              this.setState({
                  date: new Date()
              });
          }, 1000);
      }

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

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <FormattedDate1 date={this.state.date} />
                <FormattedDate2 date={this.state.date} />
            </div>
        );
    }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);
</script>

在线测试



转载请注明，
原文出处：http://lixh1986.iteye.com/blog/2429343

















-