Deploy website

Deploy website version based on fd9a179f618f3928914e6566ee92ea1180736c1a
2025-11-01 09:14:26 +00:00 · 2020-02-22 01:47:17 +00:00
parent 9626f0a5e6
commit 14526dcd4b
6 changed files with 52 additions and 70 deletions
@@ -15,50 +15,41 @@
        </script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/next/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/next/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/state.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">State</h1></header><article><div><span><p>There are two types of data that control a component: <code>props</code> and <code>state</code>. <code>props</code> are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use <code>state</code>.</p>
 <p>In general, you should initialize <code>state</code> in the constructor, and then call <code>setState</code> when you want to change it.</p>
 <p>For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a <code>prop</code>. The &quot;whether the text is currently on or off&quot; changes over time, so that should be kept in <code>state</code>.</p>
-<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState, useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
 <span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;

-<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Blink</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
+<span class="hljs-keyword">const</span> Blink = <span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> {
+  <span class="hljs-keyword">const</span> [isShowingText, setIsShowingText] = useState(<span class="hljs-literal">true</span>);

-  componentDidMount(){
-    <span class="hljs-comment">// Toggle the state every second</span>
-    setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> (
-      <span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =&gt;</span> (
-        { <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText }
-      ))
-    ), <span class="hljs-number">1000</span>);
+   useEffect(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+     <span class="hljs-keyword">const</span> toggle = setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+       setIsShowingText(!isShowingText);
+     }, <span class="hljs-number">1000</span>);
+
+     <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> clearInterval(toggle);
+  })
+
+  <span class="hljs-keyword">if</span> (!isShowingText) {
+    <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
  }

-  <span class="hljs-comment">//state object</span>
-  state = { <span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span> };
-
-  render() {
-    <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.state.isShowingText) {
-      <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
-    }
-
-    <span class="hljs-keyword">return</span> (
-      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{this.props.text}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>
-    );
-  }
+  <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{props.text}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>;
 }

-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BlinkApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
-  render() {
-    <span class="hljs-keyword">return</span> (
-      &lt;View&gt;
-        &lt;Blink text='I love to blink' /&gt;
-        &lt;Blink text='Yes blinking is so great' /&gt;
-        &lt;Blink text='Why did they ever take this out of HTML' /&gt;
-        &lt;Blink text='Look at me look at me look at me' /&gt;
-      &lt;/View&gt;
-    );
-  }
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">BlinkApp</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    &lt;View style={{marginTop: 50}}&gt;
+      &lt;Blink text='I love to blink' /&gt;
+      &lt;Blink text='Yes blinking is so great' /&gt;
+      &lt;Blink text='Why did they ever take this out of HTML' /&gt;
+      &lt;Blink text='Look at me look at me look at me' /&gt;
+    &lt;/View&gt;
+  );
 }
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
        data-snack-name="State"
        data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%0A%20%20componentDidMount()%7B%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20(%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%0A%20%20%20%20%20%20))%0A%20%20%20%20)%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20%2F%2Fstate%20object%0A%20%20state%20%3D%20%7B%20isShowingText%3A%20true%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20if%20(!this.state.isShowingText)%20%7B%0A%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bthis.props.text%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A"
+        data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Blink%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20const%20%5BisShowingText%2C%20setIsShowingText%5D%20%3D%20useState(true)%3B%0A%0A%20%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20%20const%20toggle%20%3D%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20setIsShowingText(!isShowingText)%3B%0A%20%20%20%20%20%7D%2C%201000)%3B%0A%0A%20%20%20%20%20return%20()%20%3D%3E%20clearInterval(toggle)%3B%0A%20%20%7D)%0A%0A%20%20if%20(!isShowingText)%20%7B%0A%20%20%20%20return%20null%3B%0A%20%20%7D%0A%0A%20%20return%20%3CText%3E%7Bprops.text%7D%3C%2FText%3E%3B%0A%7D%0A%0Aexport%20default%20function%20BlinkApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7BmarginTop%3A%2050%7D%7D%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
        data-snack-platform="web"
        data-snack-supported-platforms=ios,android,web
        data-snack-preview="true"
@@ -15,50 +15,41 @@
        </script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>next</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/next/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/next/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/state.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">State</h1></header><article><div><span><p>There are two types of data that control a component: <code>props</code> and <code>state</code>. <code>props</code> are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use <code>state</code>.</p>
 <p>In general, you should initialize <code>state</code> in the constructor, and then call <code>setState</code> when you want to change it.</p>
 <p>For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a <code>prop</code>. The &quot;whether the text is currently on or off&quot; changes over time, so that should be kept in <code>state</code>.</p>
-<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState, useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
 <span class="hljs-keyword">import</span> { Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;

-<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Blink</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
+<span class="hljs-keyword">const</span> Blink = <span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> {
+  <span class="hljs-keyword">const</span> [isShowingText, setIsShowingText] = useState(<span class="hljs-literal">true</span>);

-  componentDidMount(){
-    <span class="hljs-comment">// Toggle the state every second</span>
-    setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> (
-      <span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">previousState</span> =&gt;</span> (
-        { <span class="hljs-attr">isShowingText</span>: !previousState.isShowingText }
-      ))
-    ), <span class="hljs-number">1000</span>);
+   useEffect(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+     <span class="hljs-keyword">const</span> toggle = setInterval(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+       setIsShowingText(!isShowingText);
+     }, <span class="hljs-number">1000</span>);
+
+     <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> clearInterval(toggle);
+  })
+
+  <span class="hljs-keyword">if</span> (!isShowingText) {
+    <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
  }

-  <span class="hljs-comment">//state object</span>
-  state = { <span class="hljs-attr">isShowingText</span>: <span class="hljs-literal">true</span> };
-
-  render() {
-    <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.state.isShowingText) {
-      <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
-    }
-
-    <span class="hljs-keyword">return</span> (
-      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{this.props.text}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>
-    );
-  }
+  <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{props.text}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span></span>;
 }

-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BlinkApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
-  render() {
-    <span class="hljs-keyword">return</span> (
-      &lt;View&gt;
-        &lt;Blink text='I love to blink' /&gt;
-        &lt;Blink text='Yes blinking is so great' /&gt;
-        &lt;Blink text='Why did they ever take this out of HTML' /&gt;
-        &lt;Blink text='Look at me look at me look at me' /&gt;
-      &lt;/View&gt;
-    );
-  }
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">BlinkApp</span>(<span class="hljs-params"></span>) </span>{
+  <span class="hljs-keyword">return</span> (
+    &lt;View style={{marginTop: 50}}&gt;
+      &lt;Blink text='I love to blink' /&gt;
+      &lt;Blink text='Yes blinking is so great' /&gt;
+      &lt;Blink text='Why did they ever take this out of HTML' /&gt;
+      &lt;Blink text='Look at me look at me look at me' /&gt;
+    &lt;/View&gt;
+  );
 }
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
        data-snack-name="State"
        data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%0A%20%20componentDidMount()%7B%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20(%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20(%0A%20%20%20%20%20%20%20%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%0A%20%20%20%20%20%20))%0A%20%20%20%20)%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20%2F%2Fstate%20object%0A%20%20state%20%3D%20%7B%20isShowingText%3A%20true%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20if%20(!this.state.isShowingText)%20%7B%0A%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bthis.props.text%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A"
+        data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Blink%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20const%20%5BisShowingText%2C%20setIsShowingText%5D%20%3D%20useState(true)%3B%0A%0A%20%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20%20const%20toggle%20%3D%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20setIsShowingText(!isShowingText)%3B%0A%20%20%20%20%20%7D%2C%201000)%3B%0A%0A%20%20%20%20%20return%20()%20%3D%3E%20clearInterval(toggle)%3B%0A%20%20%7D)%0A%0A%20%20if%20(!isShowingText)%20%7B%0A%20%20%20%20return%20null%3B%0A%20%20%7D%0A%0A%20%20return%20%3CText%3E%7Bprops.text%7D%3C%2FText%3E%3B%0A%7D%0A%0Aexport%20default%20function%20BlinkApp()%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7BmarginTop%3A%2050%7D%7D%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A"
        data-snack-platform="web"
        data-snack-supported-platforms=ios,android,web
        data-snack-preview="true"