react 屬性與狀態 學習筆記

標籤：

知識點：
1、react 屬性的調用 this.props.被調用的屬性名稱

設定屬性的常用方法：
var props = {
one: ‘123‘,
two: 321
}
調用這個屬性：
<HelloWorld {...props} />

說明：{...props}，這裡的三個點，代表props中的所有的屬性

react 狀態的調用 this.state

this.getInitialState 預設狀態的方法；
this.setState 修改狀態的方法（經常用到）

this.setState.被修改的值

情境：修改預設屬性名稱name的值，並顯示效果

1、初始化狀態，預設狀態
getInitialState: function(){
return {
name: ‘tim‘,
}
}

2、改變狀態，就會改變預設的值。給這個預設的值添加修改後擷取元素的監聽事件 event.target 只要預設值被改變，就會擷取到這個改變後的值
handChange: function(event){
this.setState({name: event.target.value});
}

3、調用這個已經改變的狀態的屬性，顯示已經改變的狀態
render: function(){
return <p> HelloWorld,改變的值為{this.props.name} </p>
}

 

基礎知識點：

• 必須引入的js:

1. react.js
2. JSXTransformer.js

• 相容舊版本瀏覽器（可選）

1. console-polyfill.js
2. es5-sham.min.js
3. es5-shim.min.js
4. jquery.min.js

• 基礎知識點：

1. react 的預設的解析資料，產生JSX代碼的方法：   render: function(){......}
2. 渲染組件的方法：   React.render( JSX的代碼塊 , JSX代碼渲染後的儲存位置（展示效果的位置）)
3. JSX(JavaScript Xml)  是在JS中編寫XML的語言，官方文檔：https//facebook.giuhub.io/jsx/
4. JSX   首字母大寫為自訂群組件；首字母小寫為DOM元素
5. JSX   要注意3個點：元素名、子節點、節點屬性
6. 所有的html屬性與class名稱都採用駝峰命名方式：html要寫成“htmlFor”;      class要寫成"className";   否則會報錯
7. 寫在style標籤中的css樣式，在react中要以對象的方式引用    <div style = {style}></div>
8. {}大括弧裡不可以使用javascript的語句，但可以使用運算式。用運算式來代替語句。
9. script標籤的type為text/jsx

react 屬性與狀態 學習筆記