正式開始react的學習
1、react中組件的首字母如果是大寫就會當成自定義組件，如果是小寫就會當成DOM的自帶元素名。如果你自定義組件名稱首字母是小寫不會報錯，但是無法顯示。
2、自定義組件的return中最外層只能有一個節點。
3、編寫的HTML中的{}中，不能有語句，可以有求值表達式。但是可以將語句寫在函數中，然后在{}中調用函數。
4、函數名和標簽名都使用駝峰命名。
5、使用htmlFor和className。比如 <label htmlFor="name" className="red">Name</label>
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、<HelloWorld name="abc"/> //給屬性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、狀態的用法：
1 var HelloWorld = React.createClass({ 2 render:function(){ 3 return <p>Hello,{this.props.name||"world"}</p> 4 } 5 }); 6 var HelloUniverse = React.createClass({ 7 handleChange:function(e){ 8 this.setState({ 9 name:e.target.value 10 }); 11 }, 12 getInitialState:function(){ 13 return { 14 name:'', 15 } 16 }, 17 render:function(){ 18 return <div> 19 <HelloWorld {...this.state}/> 20 <input type="text" onChange={this.handleChange} /> 21 </div> 22 } 23 }); 24 var a = ReactDOM.render(<HelloUniverse/> 25 ,document.getElementById("root"));
11、屬性和狀態的相似點和區別
12、事件處理函數
13、事件對象的屬性
14、組件協同使用
父子間的協同使用可以使用子組件調用父組件的方法。來達到這個目的，父組件通過prop的方式傳遞給子組件
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello,world</title> 6 <script src="../demo01/build/react.js"></script> 7 <script src="../demo01/build/react-dom.js"></script> 8 <script src="../demo01/browser.min.js"></script> 9 </head> 10 <body> 11 <div id= "root"></div> 12 <script type="text/babel"> 13 var GenderSelect = React.createClass({ 14 render:function(){ 15 return <select name="gender" onChange={this.props.handleSelect}> 16 <option value="1">男</option> 17 <option value="0">女</option> 18 </select> 19 } 20 }); 21 var SignupForm = React.createClass({ 22 getInitialState:function(){ 23 return { 24 name:'', 25 pwd:'', 26 gender:'', 27 } 28 }, 29 handleChange:function(name,e){ 30 var newState = {} 31 newState[name] = e.target.value; 32 this.setState(newState); 33 }, 34 handleSelect:function(e){ 35 this.setState({gender:e.target.value}); 36 }, 37 render:function(){ 38 console.log(this.state) 39 return <form> 40 <input type="text" onChange={this.handleChange.bind(this,'name')}/> 41 <input type="text" onChange={this.handleChange.bind(this,'pwd')}/> 42 <GenderSelect handleSelect={this.handleSelect}/> 43 </form> 44 } 45 }); 46 var a = ReactDOM.render(<SignupForm />,document.getElementById("root")); 47 </script> 48 </body> 49 </html>
兄弟組件之間可以用過子組件A傳到父組件，父組件再傳遞到子組件B的方式來實現。
15、mixin
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello,world</title> 6 <script src="../demo01/build/react.js"></script> 7 <script src="../demo01/build/react-dom.js"></script> 8 <script src="../demo01/browser.min.js"></script> 9 </head> 10 <body> 11 <div id= "root"></div> 12 <script type="text/babel"> 13 var SetInit = { 14 handleClick:function(e){ 15 console.log(e.target.value); 16 } 17 } 18 var Hello = React.createClass({ 19 //這里命名必須為mixins 20 mixins:[SetInit], 21 render:function(){ 22 return <input type="button" onClick={this.handleClick} value="123123"/> 23 } 24 }); 25 var a = ReactDOM.render(<Hello />,document.getElementById("root")); 26 </script> 27 </body> 28 </html>
優點和缺點：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello,world</title> 6 <script src="../demo01/build/react.js"></script> 7 <script src="../demo01/build/react-dom.js"></script> 8 <script src="../demo01/browser.min.js"></script> 9 </head> 10 <body> 11 <div id= "root"></div> 12 <script type="text/babel"> 13 var BindingMixin = { 14 handleChange:function(name){ 15 var that = this; 16 return function(e){ 17 var news = {}; 18 news[name] = e.target.value; 19 that.setState(news); 20 } 21 } 22 }; 23 var Example = React.createClass({ 24 //這里命名必須為mixins 25 mixins:[BindingMixin], 26 getInitialState:function(){ 27 return { 28 text:'' 29 } 30 }, 31 render:function(){ 32 return <div> 33 <input type="text" onChange={this.handleChange('text')} /> 34 <p>{this.state.text}</p> 35 </div> 36 } 37 }); 38 var a = ReactDOM.render(<Example />,document.getElementById("root")); 39 </script> 40 </body> 41 </html>
16、可控組件和不可控組件
可控組件就是value值沒有寫死的，比如value={this.state.value}。
不可控則反之。
盡量使用可控組件
碰到的問題：
1、在wepack.config.js配置項中，因為module中的loader是多個配置項，所以應該是loaders，但是我寫的是loader，導致后面的配置項沒有生效，出現了很多編譯問題。。。
2、在組件的render中return的標簽，結尾的標簽忘記打/，比如<div></div>寫成了<div><div> react就識別成了兩個div標簽，就會報embedded: Unterminated JSX contents.
3、render中所有的非成對標簽，必須將標簽閉合，比如：<br/> <input/> 否則會報錯: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',
}
}