详解React-State

1.软文推荐

2.软文推荐

3.软文推荐

React是一款颠覆式的前端解决方案，其创新的编程思想以及衍生出来的一些生态圈技术可以说是引领了整个前端的发展。

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。 添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

React 实例

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

 render() {
   return (
     
       Hello, world!
       现在是 {this.state.date.toLocaleTimeString()}.
     
   );
 }
}

ReactDOM.render(
 ,
 document.getElementById('example')
);

接下来，我们将使Clock设置自己的计时器并每秒更新一次。

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

React 实例

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

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

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

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

 render() {
   return (
     
       Hello, world!
       现在是 {this.state.date.toLocaleTimeString()}.
     
   );
 }
}

ReactDOM.render(
 ,
 document.getElementById('example')
);

实例解析：

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。 在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。 this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。 代码执行顺序：

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。 这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。 以下实例中 FormattedDate 组件将在其属性中接收到 date 值，并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入：

React 实例

function FormattedDate(props) {
 return 现在是 {props.date.toLocaleTimeString()}.;
}

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

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

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

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

 render() {
   return (
     
       Hello, world!
       
     
   );
 }
}

ReactDOM.render(
 ,
 document.getElementById('example')
);

这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。 如果你想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。 为了表明所有组件都是真正隔离的，我们可以创建一个 App 组件，它渲染三个Clock：

React 实例

function FormattedDate(props) {
 return 现在是 {props.date.toLocaleTimeString()}.;
}

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

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

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

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

 render() {
   return (
     
       Hello, world!
       
     
   );
 }
}

function App() {
 return (
   
     
     
     
   
 );
}

ReactDOM.render(, document.getElementById('example'));

以上实例中每个 Clock 组件都建立了自己的定时器并且独立更新。 在 React 应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。 我们可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。

本文来源：www.lxlinux.net/9019.html，若引用不当，请联系修改。