react該學哪些知識？ react的知識點總結（附完整實例）

本篇文章主要的介紹了關於react的學習，關於react的知識點總結，下面我們就開始閱讀這篇文章的內容吧

正式開始react的學習

1、react中元件的首字母如果是大寫就會當成自訂元件，如果是小寫就會當成DOM的自帶元素名。如果你自訂元件名稱首字母是小寫不會報錯，但無法顯示。

2、自訂元件的return中最外層只能有一個節點。

3、寫成的HTML中的{}中，不能有語句，可以有求值表達式。但是可以將語句寫在函數中，然後在{}中呼叫函數。

4、函數名稱和標籤名稱都使用駝峰命名。

5、使用htmlFor和className。例如Name

6、樣式的編寫：可以在jsx中var style = {color:"red",backgroundColor:" blue"} 然後在自訂標籤中加入style={style}　　記得使用駝峰命名法。

7、非DOM屬性：

　　a、dangerouslySetInnerHTML：在JSX中直接插入HTML程式碼

　　b、ref：父元件參考子元件

c、key：提高渲染效能。 diff演算法

8、組件的各個生命週期中運行的函數：a、初始化。

b、運行中。

c、銷毀。

9、屬性的用法：

a、　　//給屬性name賦值"abc"

#b、

var props = {
　　one:"123",
　　two:"456"　　
}
<HelloWorld {...props}/>　　//展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body);

　a.setProps({name:"Tim"});　　//不建議這種用法，違背了React的設計原則（最新版貌似已經去掉了這個函數？console.log出來抓著原型鏈找了一遍都沒有找到這個函數，只找到了setState）

10、狀態的用法：

 var HelloWorld = React.createClass({             render:function(){                 return <p>Hello,{this.props.name||"world"}</p>             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:'',                 }             },             render:function(){                 return <p>
                     <helloworld></helloworld>
                     <input>
                 </p>             }         });         var a = ReactDOM.render(<hellouniverse></hellouniverse>
         ,document.getElementById("root"));

11、屬性和狀態的相似點與差異

12、事件處理函數

13、事件物件的屬性

 14、元件協同使用

父子間的協同使用可以使用子元件呼叫父元件的方法。來達到這個目的，父元件透過prop的方式傳遞給子元件

 nbsp;html>
 
 
     <meta>
     <title>Hello,world</title>
     <script></script>
     <script></script>
     <script></script>
 
 
     <p></p>
     <script>         var GenderSelect = React.createClass({             render:function(){                 return <select name="gender" onChange={this.props.handleSelect}>
                     <option value="1">男
                     <option value="0">女
                              }         });         var SignupForm = React.createClass({             getInitialState:function(){                 return {                     name:&#39;&#39;,                     pwd:&#39;&#39;,                     gender:&#39;&#39;,                 }             },             handleChange:function(name,e){                 var newState = {}                 newState[name] = e.target.value;                 this.setState(newState);             },             handleSelect:function(e){                 this.setState({gender:e.target.value});             },             render:function(){                 console.log(this.state)                 return <form>
                     <input type="text" onChange={this.handleChange.bind(this,&#39;name&#39;)}/>
                     <input type="text" onChange={this.handleChange.bind(this,&#39;pwd&#39;)}/>
                     <GenderSelect handleSelect={this.handleSelect}/>
                              }         });         var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
     </script>
 
 

父子元件互動（想看更多就到PHP中文網React參考手冊欄位中學習）

兄弟元件之間可以用過子元件A傳到父元件，父元件再傳遞到子元件B的方式來實作。

15、mixin

 nbsp;html>
 
 
     <meta>
     <title>Hello,world</title>
     <script></script>
     <script></script>
     <script></script>
 
 
     <p></p>
     <script>         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return <input type="button" onClick={this.handleClick} value="123123"/>             }         });         var a = ReactDOM.render(<Hello />,document.getElementById("root"));
     </script>
 
 

#mixin實例

 優點與缺點：

 nbsp;html>
 
 
     <meta>
     <title>Hello,world</title>
     <script></script>
     <script></script>
     <script></script>
 
 
     <p></p>
     <script>         var BindingMixin = {             handleChange:function(name){                 var that = this;                 return function(e){                     var news = {};                     news[name] = e.target.value;                     that.setState(news);                 }             }         };         var Example = React.createClass({             //这里命名必须为mixins
             mixins:[BindingMixin],             getInitialState:function(){                 return {                     text:&#39;&#39;                 }             },             render:function(){                 return <p>
                     <input type="text" onChange={this.handleChange(&#39;text&#39;)} />
                     <p>{this.state.text}
                              }         });         var a = ReactDOM.render(<Example />,document.getElementById("root"));
     </script>
 
 

mixin

#16、可控元件和不可控元件

##可控元件就是value值沒有寫死的，例如value={this.state.value}。

不可控則反之。

盡量使用可控元件

碰到的問題：

1、在wepack.config.js設定項中，因為module中的loader是多個設定項，所以應該是loaders，但我寫的是loader，導致後面的設定項目沒有生效，出現了很多編譯問題。 。 。

2、在元件的render中return的標籤，結尾的標籤忘記打/，例如

寫成了

react就識別成了兩個p標籤，就會報到embedded: Unterminated JSX contents.

3、render中所有的非成對標籤，必須將標籤閉合，例如：
否則會報錯:embedded: Expected corresponding JSX closing tag for

4、很有意思的一個東西，如果我在某個函數中setState了某個屬性，那麼緊接著馬上打印出來這個屬性是不會有正確的結果的。要在componentDidUpdate函數中，也就是等元件更新完以後再列印出來才是正確的結果。

5、如果在父元件中更新了子元件的prop，請不要將這個prop放入getInitialState函數中當做屬性，因為如果更新了prop的話，子元件是不會更新state中的屬性（可以查看11當中的表格）。

6、如果使用的是es6的語法，也就是採用繼承React.Component的方法來建構元件的話，就不能使用getInitialState()函數，會報警告Warning: getInitialState was defined on TodoApp, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead? 

解決方法：設定constructor

constructor(props){
　　super(props);
      this.state = {
　　　　example:'example',
　　}
}

這篇文章到這就結束了（想看更多就到PHP中文網

React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是react該學哪些知識？ react的知識點總結（附完整實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！