本篇文章主要的介紹了關於react的學習，關於react的知識點總結，下面我們就開始閱讀這篇文章的內容吧
正式開始react的學習
1、react中元件的首字母如果是大寫就會當成自訂元件，如果是小寫就會當成DOM的自帶元素名。如果你自訂元件名稱首字母是小寫不會報錯，但無法顯示。
2、自訂元件的return中最外層只能有一個節點。
3、寫成的HTML中的{}中，不能有語句，可以有求值表達式。但是可以將語句寫在函數中，然後在{}中呼叫函數。
4、函數名稱和標籤名稱都使用駝峰命名。
5、使用htmlFor和className。例如
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、
#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 {...this.state}/>
<input type="text" onChange={this.handleChange} />
</p> } }); var a = ReactDOM.render(<HelloUniverse/>
,document.getElementById("root"));11、屬性和狀態的相似點與差異
12、事件處理函數
13、事件物件的屬性
14、元件協同使用
父子間的協同使用可以使用子元件呼叫父元件的方法。來達到這個目的，父元件透過prop的方式傳遞給子元件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var GenderSelect = React.createClass({ render:function(){ return <select name="gender" onChange={this.props.handleSelect}>
<option value="1">男</option>
<option value="0">女</option>
</select> } }); 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 <form>
<input type="text" onChange={this.handleChange.bind(this,'name')}/>
<input type="text" onChange={this.handleChange.bind(this,'pwd')}/>
<GenderSelect handleSelect={this.handleSelect}/>
</form> } }); var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
</script>
</body>
</html>父子元件互動（想看更多就到PHP中文網React參考手冊欄位中學習）
兄弟元件之間可以用過子元件A傳到父元件，父元件再傳遞到子元件B的方式來實作。
15、mixin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> 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>
</body>
</html>#mixin實例
優點與缺點：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> 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 <p>
<input type="text" onChange={this.handleChange('text')} />
<p>{this.state.text}</p>
</p> } }); var a = ReactDOM.render(<Example />,document.getElementById("root"));
</script>
</body>
</html>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中所有的非成對標籤，必須將標籤閉合，例如：constructor(props){
super(props);
this.state = {
example:'example',
}
}React使用手冊欄位中學習），有問題的可以在下方留言提問。
以上是react該學哪些知識？ react的知識點總結（附完整實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
