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

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

正式開始react的學習

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

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

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

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

5、使用htmlFor和className。例如f48f817659b5fa20e8078bc1b66e32afName8c1ecd4bb896b2264e0711597d40766c

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、c66779f069bd2b7ec0a732d614208d0d　　//給屬性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 e388a4556c0f65e1904146cc1a846beeHello,{this.props.name||"world"}94b3e26ee717c64999d7867364b1b4a3             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:'',                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     3d6f15d111504205b90761d1b885e19b
                     3aac1c4d464391a52269ddfd6b12d6a8
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a6d3e660a2713293fe38ad9ec2a46721
         ,document.getElementById("root"));

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

12、事件處理函數

13、事件物件的屬性

 14、元件協同使用

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

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var GenderSelect = React.createClass({             render:function(){                 return 0af7195d42db1dffc2a9a5f85aaa2523
                     859be17dfcd6af2d26185135fb5bd8fc男4afa15d3069109ac30911f04c56f3338
                     302223510126f57919da8bd0aae4999d女4afa15d3069109ac30911f04c56f3338
                 18bb6ffaf0152bbe49cd8a3620346341             }         });         var SignupForm = React.createClass({             getInitialState:function(){                 return {                     name:'',                     pwd:'',                     gender:'',                 }             },             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 ff9c23ada1bcecdd1a0fb5d5a0f18437
                     6bdab968141063db56c595ca92e6ba13
                     b09b07021e9bc4f0c6ac9ccf14b9d325
                     bb6e2821895de793301ee6cda0d13d50
                 f5a47148e367a6035fd7a2faa965022e             }         });         var a = ReactDOM.render(380d7116d918a5f1222d431cfa4f7858,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

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

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

15、mixin

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return 84c464c714467c62ed8a7b74d3934788             }         });         var a = ReactDOM.render(b242f848c3983ea1d4adbc5496a81c19,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

#mixin實例

 優點與缺點：

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         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:''                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     5985a603fea88064e808209d741039f4
                     e388a4556c0f65e1904146cc1a846bee{this.state.text}94b3e26ee717c64999d7867364b1b4a3
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a7e09b9eeb1a809bc82d2666b8e06659,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixin

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

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

不可控則反之。

盡量使用可控元件

碰到的問題：

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

2、在元件的render中return的標籤，結尾的標籤忘記打/，例如e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3寫成了e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee react就識別成了兩個p標籤，就會報到embedded: Unterminated JSX contents.

3、render中所有的非成對標籤，必須將標籤閉合，例如：076402276aae5dbec7f672f8f4e5cc81 0f0306f9b187f2e363126bc29c8b1420 否則會報錯: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中文網其他相關文章！