資訊專欄INFORMATION COLUMN
摘要：基礎(chǔ)創(chuàng)建虛擬參數(shù)元素名稱，例如參數(shù)屬性集合，例如，，，從參數(shù)開始，表示該元素的子元素，通常這些元素通過創(chuàng)建，文本文件可以直接插入嘻嘻哈哈這是渲染器，將元素渲染到頁面中。
React簡介
FeceBook開源的一套框架，專注于MVC的視圖V模塊。實(shí)質(zhì)是對V視圖的一種實(shí)現(xiàn)。
React框架的設(shè)計(jì)沒有過分依賴于某個(gè)環(huán)境，它自建一套環(huán)境，就是virtual DOM（虛擬DOM）。
提供基礎(chǔ)API：創(chuàng)建元素，渲染元素。
React的獨(dú)特之處：
組件的組合模式，單向數(shù)據(jù)流的設(shè)計(jì)(Date Flow)，高效的性能(Virtual DOM)，分離的設(shè)計(jì)
React的核心思想：封裝組件，各個(gè)組件維護(hù)自己的狀態(tài)和 UI, 當(dāng)狀態(tài)變更，自動重新渲染整個(gè)組件。
瀏覽器環(huán)境中渲染
react.js： 構(gòu)建虛擬DOM， React.createElement(); React核心庫，在應(yīng)用中必須先加載核心庫。
react-dom.js: 將虛擬DOM渲染頁面中，ReactDOM.render(); DOM渲染器，React將核心庫和渲染器分離，目的：在Web頁面中顯示開發(fā)的組件。
JSX是React自定義的語法，最終JSX會轉(zhuǎn)化為JS運(yùn)行與頁面當(dāng)中
組件組件是React中核心概念，頁面當(dāng)中的所有元素都通過React組件來表達(dá)，將要寫的React代碼絕大部分都是在做React組件的開發(fā)。
組合模式： 組合模式又稱之為：部分-整體模式。使樹形結(jié)構(gòu)的問題中，模式了簡單元素和復(fù)雜元素的概念，客戶程序可以向處理簡單元素一樣來處理復(fù)雜的元素，從而使得客戶程序與復(fù)雜元素的內(nèi)部結(jié)構(gòu)解耦。
無論是應(yīng)用等級還是一個(gè)表單亦或是一個(gè)按鈕，都視為一個(gè)組件。然后基于組件的組合構(gòu)建整個(gè)應(yīng)用。
組合模式優(yōu)點(diǎn)：
構(gòu)建可以重用的組件：組件的開發(fā)能夠形成公司的組件，每個(gè)業(yè)務(wù)的開發(fā)都能積累課重用的組件。
JSX語法
具有彈性的架構(gòu)： 能夠構(gòu)建簡單的頁面也能構(gòu)建大型的前端應(yīng)用。
維護(hù)性高。
VIRTUAL DOMReact抽象出來的虛擬DOM樹，虛擬樹是React高性能的關(guān)鍵。（讓需要改變的元素才去重新渲染）
單項(xiàng)數(shù)據(jù)流單項(xiàng)數(shù)據(jù)流：one-way reactive data flow
React應(yīng)用的核心設(shè)計(jì)模式，數(shù)據(jù)流向自頂向下。
頁面的UI和數(shù)據(jù)的對應(yīng)是唯一的。
基礎(chǔ)API createElementReact.createElement();
創(chuàng)建虛擬DOM
參數(shù)1：元素名稱， 例如: div,p, h1
參數(shù)2：屬性集合，例如：title，calssName，id，style
從參數(shù)3開始，表示該元素的子元素，通常這些元素通過createElement();創(chuàng)建， （文本文件可以直接插入）
let ul = React.createElement("ul", {
"title": "嘻嘻哈哈"
},"這是");
render
ReactDOM.render();
DOM渲染器，將元素渲染到頁面中。
參數(shù)1：虛擬DOM元素
參數(shù)2：HTML的容器元素。
ReactDOM.render(ul, document.querySelector(".app"));
示例：
crateClass
React.createClass();
定義組件
參數(shù)：配置對象。
對象中可以添加任何方法，但一些屬性，方法是特殊的。
render: 組件中渲染輸出的虛擬DOM元素。
// component
let Uls = React.createClass({
render: function () {
return React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"a"
),
React.createElement(
"li",
null,
"b"
),
React.createElement(
"li",
null,
"c"
)
)
}
});
// 組件變成虛擬DOM
let ul = React.createElement(Uls, null);
// 渲染頁面
ReactDOM.render(ul, document.querySelector(".app"));
JSX語法
創(chuàng)建JSX語法的本質(zhì)：使用基于XML的方式表達(dá)組件嵌套，保持和HTML一致的結(jié)構(gòu)。最終所有的JSX都會編譯為原生JavaScript
嵌套規(guī)則：標(biāo)簽可以任意嵌套。標(biāo)簽閉合，必須嚴(yán)格閉合，否則無法編譯通過。
編譯JSX語法：
工程化工具：fis-parse-babel2
fis.match("**.jsx", {
parser: fis.plugin("babel2"),
rExt: ".js"
});
// 渲染HTML內(nèi)部的JSX語法
fis.match("**.html:jsx", {
parser: fis.plugin("babel2")
});
JSX示例：
// 創(chuàng)建組件
let Uls = React.createClass({
render: function () {
return (
組件大致分類
APP 組件： 整個(gè)頁面的最完整組件
Header 組件： 頭部輸入組件
TodoList組件： 列表組件
TodoItem 組件： 列表項(xiàng)
Footer 組件： 底部操作組件
虛擬DOM屬性為虛擬DOM添加屬性，傳遞屬性的方式和HTML相同。
屬性可以是字符串，也可以是任意的JavaScrip變量。需要使用插值方式解析變量。
特殊屬性：
class，要使用成className
for， 要使用成htmlFor
// 創(chuàng)建組件
let Uls = React.createClass({
render: function () {
return (
對HTML組件
fuunction render () {
return Hello
}
React自定義組件
fuunction render () {
return
}
JSX花括號
插值形式，動態(tài)的改變虛擬DOM中屬性值，或者內(nèi)容，或使用JavaScript表達(dá)式，做簡單的運(yùn)算。
語法： {表達(dá)式}
"use strict";
// Component
let Header = React.createClass({
render: function () {
let userName = "cyan";
let date = new Date();
return (
{userName}
{date.getHours() > 12 ? "下午" : "上午"}
);
}
});
// 渲染
ReactDOM.render(
JSX注釋
let Header = React.createClass({
render: function () {
{/* 這里是注釋 */}
}
});
Component
props屬性
組件中特殊屬性：props
作用：獲取組件上添加的屬性。
設(shè)置默認(rèn)的屬性，通過getDefaultProps()來設(shè)置，是React內(nèi)置方法名，在自定義方法的時(shí)候，不能重寫。
this.props : 獲取屬性值
geetDefaultProps(); : 獲取默認(rèn)屬性對象，會被調(diào)用一次，當(dāng)組件類創(chuàng)建的時(shí)候會被調(diào)用，返回值會被緩存起來，當(dāng)組件被實(shí)例化過后如果傳入的屬性沒有值，會返回默認(rèn)值屬性值。
this.props.children : 子節(jié)點(diǎn)屬性
propTypes ： 屬性類型檢查
一般的，props規(guī)定是只能讀取，應(yīng)該禁止被修改。
原因： React 不能幫檢查屬性類型(propTypes)，修改props對象可能會導(dǎo)致預(yù)料之外的結(jié)果。
屬性數(shù)據(jù)的單項(xiàng)性
React的單項(xiàng)數(shù)據(jù)流模式，數(shù)據(jù)的流動管道就是 props，流動的方向就組件的層級自頂向下的方向。所以一個(gè)組件是不能修改自身的屬性，組件的屬性一定是通過父組件傳遞而來(或默認(rèn)屬性)
"use strict";
// Component
let Prat = React.createClass({
getDefaultProps: function () {
return {
title: ["默認(rèn)標(biāo)題"]
}
},
createLi: function () {
return this.props.title.map( ( val, idx ) => {
return (設(shè)置style的樣式
普通的CSS樣式， 遵循駝峰式命名規(guī)則
CSS3樣式，遵循大駝峰式命名規(guī)則
注意：樣式并不能像HTML行內(nèi)一樣，需要使用插值方式,插值中使用對象。
"use strict";
// Componedt
let Style = React.createClass({
render: function () {
let sty = {
color: "red",
border: "1px solid #000",
borderBottom: "2px solid tan"
}
return (
title
titile2
);
}
});
// 渲染
ReactDOM.render(, document.querySelector(".app"));
Event
React中為虛擬DOM添加事件與HTML為DOM添加事件一樣：
一般的為React添加的DOM事件，并不要字符串，需要使用插值符號為虛擬DOM添加事件回調(diào)函數(shù)。
// Componedt
let Style = React.createClass({
changeContent: function ( ev ) {
ev.target.innerHTML = "修改后的文案";
},
render: function () {
let sty = {
color: "red",
border: "1px solid #000",
borderBottom: "2px solid tan"
}
return (
title
titile2
);
}
});
// 渲染
ReactDOM.render(, document.querySelector(".app"));
state狀態(tài)
無狀態(tài)組件屬性
對于無狀態(tài)組件，可以添加 .propTypes 和 .defaultProps 屬性到函數(shù)上。
如果一個(gè)在渲染頁面之后組件不會變化，可以通過props就可以實(shí)現(xiàn)對組件的樣式設(shè)置以及行為渲染，此時(shí)組件不會收到外界的影響，組件是一成不變的，這類組件叫做： 無狀態(tài)satateless組件.
state
對于大部分的組件來說，通常是要通與外界交流，此時(shí)組件要處于不同的狀態(tài)，此時(shí)的組件就要有狀態(tài)，對于組件內(nèi)部的狀態(tài)控制，可以通過state屬性控制.
state屬性： 控制組件的內(nèi)部狀態(tài).
getInitialState() : 初始化狀態(tài),
返回一個(gè)對象，或者數(shù)據(jù)，指代的就是 state
setState() : 設(shè)置狀態(tài)
參數(shù)：設(shè)置的值
state每次更新都會觸發(fā)一次render() 方法.
state一般的都是內(nèi)部自定義方法來控制改變其狀態(tài).
// 創(chuàng)建 Component
let Dom = React.createClass({
getInitialState: function () {
return {
index: 0,
txt: "嘻嘻哈哈"
}
},
render: function () {
// console.log( this.state );
return (
{this.state.txt}
);
},
clickContent: function () {
this.setState({
txt: "么么噠"
});
}
});
// 渲染組件
ReactDOM.render(
Component生命周期
生命周期的方法都是在調(diào)用 React.createClass(); 的參數(shù)配置對象傳入.
組件規(guī)格
mixins
mixins： React的插件列表。通過這種模式在不同組件之間共享方法數(shù)據(jù)或者行為只需共享mixin即可。
mixins內(nèi)定義的生命周期方法在組件的生命周期內(nèi)都會被調(diào)用。
statics
statics ： 定義組件的類方法。
// Component
let oDiv = React.createClass({
// 定義組件類方法
statics: {
statisMethod: () => {
return true;
}
},
// Class 分為類方法和實(shí)例方法， 實(shí)例方法可以訪問this，而類方法不能。
// 不能在Class中返回狀態(tài)或者屬性。
render: function () {
return (
嘻嘻哈哈
);
}
});
// 渲染組件
ReactDOM.render(
displayName
displayName : 組件的名稱，JSX在轉(zhuǎn)為JavaScript的時(shí)候自動設(shè)置displayName。 也可以手動設(shè)置。
組件生命周期方法
整個(gè)組件的生命周期，包含：
組件被實(shí)例化
組件屬性改變
組件狀態(tài)被改變
組件被銷毀
組件實(shí)例化
getDefaultProps() : 設(shè)置組件的屬性（props屬性）
getInitialSate() : 設(shè)置初始化狀態(tài)(state)
componentWillMount() : 組件即將被創(chuàng)建
render() : 渲染輸出虛擬DOM
componentDidMount() : 組件構(gòu)建完成
componentWillMount()
條件： 第一次渲染階段在調(diào)用render方法前會被調(diào)用
作用: 該方法在整個(gè)生命組件只會被調(diào)用一次，可以利用該方法做一些組件內(nèi)部的初始化工作。
componentDidMount();
條件： 第一次渲染成功后，組件對應(yīng)的DOM已經(jīng)添加到頁面后調(diào)用.
作用： 這個(gè)階段表示組件對應(yīng)的DOM已經(jīng)存在，可以在這個(gè)時(shí)候做一些依賴DOM的操作，或者其他一些， 例如：請求數(shù)據(jù)，和第三方庫整合的操作。
如果嵌套了子組件，子組件會比父組件優(yōu)先渲染，所以這個(gè)時(shí)候可以獲取子組件對應(yīng)的DOM。
// Component
let GoBack = React.createClass({
getDefaultProps: function () {
console.log(111);
return {
title: ""
}
},
getInitialState: function () {
console.log(222);
return {
sateteTitle: this.props.title
}
},
componentWillMount: function () {
console.log(333,this.satate, this.props);
},
render: function () {
console.log(444);
return (返回頂部);
},
componentDidMount: function () {
console.log(555);
const _this = this;
setTimeout(() => {
_this.setState({
stateTitle: "修改后title"
});
}, 1000);
}
});
// 渲染
ReactDOM.render(
在未初始化props之前，無法使用this.props.xxx
組件存在期
一旦組件被創(chuàng)建，那么就進(jìn)入了組件的存在期，在存在期中，每次組件更新的時(shí)候，會進(jìn)入新的5個(gè)階段.
componentWillReceivePros() : 表示組件將要接收新的屬性.
shouldComponentUpdate() : 組件是否應(yīng)該更新.
componentWillUpdate() : 組件將要被更新
render() : 重新渲染組件
componentDidUpdate() : 組件已經(jīng)被更新
componentWillReceivePros(newProps);
條件：當(dāng)組件獲取新屬性的時(shí)候， 第一次渲染不會調(diào)用.
用處：這個(gè)時(shí)候可以根據(jù)新的屬性來修改組件的狀態(tài)
獲取新的屬性，但并不能確定屬性一定改變了，例如: 一個(gè)組件被多次渲染到DOM中.
shouldComponentUpdate()
參數(shù)1：nextprops 下一個(gè)屬性
參數(shù)2: nextstate 下一個(gè)狀態(tài)
返回：返回布爾值，true表示更新組件，false表示不要對組件進(jìn)行更新，后面階段不會執(zhí)行.
條件：接收到新屬性或新狀態(tài)的時(shí)候在render前 會被調(diào)用(除了調(diào)用forceUpdate 和 初始化渲染以外)
用處：有機(jī)會絕對是否重新渲染組件。可以優(yōu)化應(yīng)用性能(在多組件的情況中)
componentWillUpdate()
參數(shù)1: nextProps 下一個(gè)屬性
參數(shù)2：nextState 下一個(gè)狀態(tài)
條件： 當(dāng)組件確定要更新，在render()之前被調(diào)用.
用處：可以確定一定會更新組件，可以執(zhí)行更新前做一些操作。
這個(gè)方法中不能使用 setState(); setState();的操作應(yīng)該是在componentWillReceiveProps();方法中調(diào)用.
componentDidUpdate()
參數(shù)1：prevProps 前一個(gè)屬性
參數(shù)2：prevState 前一個(gè)狀態(tài)
條件：更新被應(yīng)用到DOM之后
用處：可以執(zhí)行組件更新之后的操作。
存在期中的方法，在組件第一次渲染的時(shí)候，不會執(zhí)行，componentWillReceiveProps();方法在組件內(nèi)部狀態(tài)更新的是不會被調(diào)用.
銷毀期
組件生命周期的最后個(gè)階段，到了這個(gè)階段，也就是說，組件要被銷毀了。
componentWillUnmount()
組件即將在DOM樹中刪除
條件：組件銷毀的時(shí)候執(zhí)行
生命周期與單項(xiàng)數(shù)據(jù)流
React的核心模式是單項(xiàng)數(shù)據(jù)流。在組件內(nèi)部的生命周期中也是符合單項(xiàng)數(shù)據(jù)的模式。數(shù)據(jù)從組件的屬性流入，再結(jié)合組件的狀態(tài)，流入生命周期的方法，直到渲染結(jié)束，都應(yīng)該是一個(gè)單向的過程，其間不能隨意改變組件的狀態(tài)。
子組件子組件： 在組件內(nèi)部使用其它組件的時(shí)候，組件被嵌套該組件中，作為子組件使用.
作為一個(gè)父組件的子組件，可以通過屬性傳遞數(shù)據(jù)信息，直接在父組件中，對子組件添加屬性.
React是單項(xiàng)數(shù)據(jù)流，只能從父組件中的信息，傳遞給子組件.
注意：渲染組件的時(shí)候，只需要渲染父組件即可.
父組件傳遞數(shù)據(jù)信息給子組件方法：
1: 通過屬性傳遞數(shù)據(jù)信息，直接在父組件中對子組件添加屬性信息。
let Main = React.createCalss({
render: function () {
return (
{/* 子組件 */}
2: 通過父組件的屬性 {props}。 將父組件內(nèi)部的數(shù)據(jù)傳遞子組件中.
let Main = React.createClass({
getDefaultProps: function () {
return {
title: ""
}
},
render: function () {
return (
{/* 子組件 */}
3: 通過父組件的狀態(tài) {state}。 將父組件內(nèi)部的數(shù)據(jù)傳遞子組件中.
let Main = React.createClass({
getDefaultProps: function () {
return {
title: ""
}
},
getInitialState: function () {
return {
title: "么么噠"
}
},
render: function () {
return (
{/* 子組件 */}
組件的作用域，與JavaScript變量的作用域機(jī)制一樣.
子組件會尋找自身的prop屬性，state狀態(tài)。然后尋找父組件的prop屬性，state狀態(tài)。
兄弟組件的信息傳遞每個(gè)組件都有自己的完整空間，彼此之間沒有聯(lián)系，如何實(shí)現(xiàn)兄弟組件之間的通信。
父組件和子組件通信，可以通過設(shè)置子組件的屬性： 傳遞固定值，屬性值，狀態(tài)值，還可以傳遞方法或者函數(shù)。
注意： 傳遞方法或者函數(shù)時(shí)：事件對象是組建綁定的元素。this指向父組件。
子組件向父組件傳遞消息，可以通過父組件為子組件添加函數(shù)，子組件通過調(diào)用該函數(shù)，傳遞參數(shù)數(shù)據(jù)來實(shí)現(xiàn)。
// InputMsg Component
const InputMsg = React.createClass({
render: function () {
// console.log( this.props.changeMsg() );
return (
);
}
});
// App Component
const App = React.createClass({
getInitialState: function () {
return {
msg: "world"
}
},
render: function () {
return (
{/* 父組件傳遞方法 */}
兄弟組件之間的通訊，需要通過它們共同的父組件的state或者props來實(shí)現(xiàn)。
一般的，通過父組件的state來實(shí)現(xiàn).
"use strict";
// 實(shí)現(xiàn) 組件之間的 雙向數(shù)據(jù)綁定
// InputMsg Component
const InputMsg = React.createClass({
render: function () {
// console.log( this.props.changeMsg() );
return (
);
}
});
// ShowMsg Component
const ShowMsg = React.createClass({
getDefaultProps: function () {
return {
msg: "嘻嘻哈哈"
}
},
render: function () {
return (
{ this.props.msg }
);
}
});
// App Component
const App = React.createClass({
getInitialState: function () {
return {
msg: "world"
}
},
render: function () {
return (
4，子組件傳遞信息給父組件
子組件向父組件傳遞消息，可以通過父組件為子組件添加函數(shù)實(shí)現(xiàn)，子組件通過調(diào)用該方法，并通過處理之后的數(shù)據(jù)用參數(shù)形式傳遞給父組件來完成。
父組件定義方法，子組件調(diào)用方法
事件處理與合成事件React只需把事件處理器，以駝峰命名形式當(dāng)作組件props傳入。就像是用普通HTML事件一樣。
React內(nèi)部創(chuàng)建一套合成事件系統(tǒng)來使所有在IE8和以上瀏覽器表現(xiàn)一致，也就是說，React懂得處理冒泡和捕獲事件，事件對象的參數(shù)與W3C規(guī)范一致。
需要在手機(jī)或平板等觸摸設(shè)備上使用React，在React版本0.14自動開啟觸屏事件。
findAllInRenderedTree
自動綁定和事件代理AutoBinding: 在JavaScript里創(chuàng)建回調(diào)函數(shù)的時(shí)候，保證this的正確性，一般都需要顯示的綁定方法到它的實(shí)力上， React所有方法被自動綁定到它的組件實(shí)例上。
事件代理： React并沒有把時(shí)間處理器綁定到節(jié)點(diǎn)本省。當(dāng)React啟動的時(shí)候，它在最外層使用一個(gè)唯一的事件監(jiān)聽器處理所有時(shí)間。當(dāng)組件被加載和銷毀時(shí)，只是在內(nèi)部映射里添加或刪除事件處理器。當(dāng)事件觸發(fā)，React根據(jù)映射來決定如何分發(fā)。當(dāng)映射里處理器時(shí)，會當(dāng)作空操作處理。
組件其實(shí)是狀態(tài)機(jī)React 把用戶界面當(dāng)作簡單狀態(tài)機(jī)。把用戶界面想象成擁有不同狀態(tài)然后渲染這些狀態(tài)，可以輕松讓用戶界面與數(shù)據(jù)保持一致。
React中，只需要更新組件的state，然后根據(jù)新的state重新渲染用戶界面(不要操作DOM)。React來決定如何最高效的更新DOM。
state工作原理常用的通知React數(shù)據(jù)變化的方法時(shí)調(diào)用 setState(data, callback); 這個(gè)方法會合并(merge) data 到 this.state ，并重新渲染組件。渲染完成后，調(diào)用可選的callback回調(diào)。大部分情況下不需要提供callback，因?yàn)镽eact會負(fù)責(zé)把界面更新到最新的狀態(tài)。
哪些組件應(yīng)該有State
大部分組件的工作應(yīng)該是沖 props 里面 取出數(shù)據(jù)并渲染。但是，有時(shí)候需要和用戶俗話如，服務(wù)器請求數(shù)據(jù)，或者時(shí)間變化等做出相應(yīng)，這時(shí)才需使用State。
嘗試把盡可能多的組件無狀態(tài)化這樣做能隔離state ， 作用： 把它放到最合理的地方，也能減少冗余，同時(shí)易于解釋程序運(yùn)作過程。
常用的模式是：創(chuàng)建多個(gè)只負(fù)責(zé)渲染數(shù)據(jù)的無狀態(tài)組件，在它們的上層創(chuàng)建一個(gè)有狀態(tài)的組件并把它的狀態(tài)通過props傳給子級。這個(gè)有狀態(tài)的組件封裝了所有用戶的交互邏輯，而這些無狀態(tài)組件負(fù)責(zé)聲明式的渲染數(shù)據(jù)。
哪些應(yīng)該作為State
state應(yīng)該包括那些可能被組件的事件處理器改變并觸發(fā)用戶界面更新的數(shù)據(jù)。真實(shí)的應(yīng)用中這種數(shù)據(jù)一般都很小且能被JSON序列化。當(dāng)創(chuàng)建一個(gè)狀態(tài)化的組件時(shí)，想象一下表示它的狀態(tài)最少需要哪些數(shù)據(jù)，并只會把這些數(shù)據(jù)存入 this.state。在render() 里再根據(jù)state來計(jì)算需要的其它數(shù)據(jù)。
如果在state里添加冗余數(shù)據(jù)或計(jì)鎖的數(shù)據(jù)，需要經(jīng)常手動保持?jǐn)?shù)據(jù)不同步，不能讓React來幫助處理。
用戶相關(guān)
后臺數(shù)據(jù)
事件需要的數(shù)據(jù)
哪些不應(yīng)該作為 State
this.state 應(yīng)該僅包括能夠表示用戶界面狀態(tài)所需的最少數(shù)據(jù)。 不應(yīng)該包括state：
計(jì)算所得數(shù)據(jù)： 不要擔(dān)心state 來預(yù)先計(jì)算數(shù)據(jù) -- 把所有的計(jì)算都放在render() 里面更容易保證用戶界面和數(shù)據(jù)的一致性。
React組件： 在render()里使用當(dāng)前 props和state 來創(chuàng)建它。
基于props的重復(fù)數(shù)據(jù)： 盡可能的使用props來作為唯一數(shù)據(jù)源。把props保存到state的一個(gè)有效的場景是需要知道它以前的值的時(shí)候，因?yàn)槲磥淼膒rops可能會變化。
React與DOM 獲取DOM元素第一種方式：
對于表單使用：ref="names" 來定義表單中的屬性
獲取使用： this.refs.names
作用：一般使用獲取表單元素中的值
第二種方式：
findDOMNode();
參數(shù)：組件實(shí)例。
一般在組件實(shí)例化完成階段使用componentDidMount
獲取整個(gè)實(shí)例化后的真實(shí)DOM
注意：不能使用在無狀態(tài)組件上.
const Checkbox = React.createClass({
getInitialState: function () {
return {
cb1: false,
cb2: false
}
},
render: function () {
return (
籃球
足球
);
},
componentDidMount: function () {
let dom = ReactDOM.findDOMNode(this);
let inps = ReactDOM.findDOMNode( this.refs.cb1 );
// 獲取 this.refs.cb1 的 所在DOM，并不能傳入 this.refs。
},
showReslut: function () {
console.log( this.refs.cb1.checked, this.refs.cb2.checked );
},
change: function ( ev ) {
let cheVals = ev.target.checked;
this.setState({
"cb1": cheVals
});
}
});
// render
ReactDOM.render(
非元素屬性
非元素屬性： 不是DOM元素原生就有的屬性。(例如：自定義屬性，React提供的特殊屬性，ref等)
"use strict";
let Search = React.createClass({
render: function () {
// 模擬搜索之后文案顯示
let content = {
__html: "搜索結(jié)果，么么噠"
}
return (
{/* 使用行內(nèi)式的樣式，需要通過 dangerouslySetInnerHTML屬性設(shè)置 */}
);
},
clickSearch: function ( ev ) {
let vals = this.refs.serachInput.value;
console.log(vals);
}
});
// 渲染
ReactDOM.render(
key: 列表中元素的ID。通過設(shè)置key是的每個(gè)列表元素獲取ID
ref ： 獲取表單或組件內(nèi)部的元素的 文本節(jié)點(diǎn)，value值
dangerouslySetInnerHTML : 設(shè)置元素的內(nèi)容，該屬性對應(yīng)的值為一個(gè)對象， 對象中是React定義的： __html屬性對應(yīng)值，會渲染到元素中. (對應(yīng)值：可以是文本節(jié)點(diǎn)，標(biāo)簽節(jié)點(diǎn));
定義：
let content = {
__html: "搜索結(jié)果，么么噠"
}
使用：
約束性組件和非約束性組件
約束性組件：狀態(tài)是交由組件自身管理(state是通過初始化，自定義方法設(shè)置狀態(tài))
非約束性組件：狀態(tài)是交由元素自身管理
一般的，約束性組件與非約束性組件是對表單元素而言的。
非約束性組件
非約束性組件，表單值與是由用戶輸入。
"use strict";
// Component
const Search = React.createClass({
clickBtn: function ( ev ) {
let vals = this.refs.serchInput.value;
console.log(vals);
},
render: function () {
return (
{/* */}
);
}
});
// render
ReactDOM.render(
placeholder與defaultValue的區(qū)別：
placeholder與defaultValue都是顯示文案，defaultValue在編譯后會變成value值
獲取表單內(nèi)的內(nèi)容需要設(shè)置ref="names"，獲取需要：this.refs.names。
這種方式，元素的狀態(tài)信息保存在元素本身，因此它是一種非約束性組件.
約束性組件
表單元素的value值交給組件的state管理，稱之為: 約束性組件。
當(dāng)表單元素改變的時(shí)候，可以通過onChange()事件來獲取，顯性修改state，通過state來渲染新的input的value值。
優(yōu)點(diǎn)：元素的值交由組件管理，表單驗(yàn)證更加靈活。
"use strict";
const Search = React.createClass({
getInitialState: function () {
return {
inp: "默認(rèn)狀態(tài)",
txt: ""
}
},
render: function () {
return (
{this.state.txt}
);
},
inpChange: function ( ev ) {
let vals = ev.target.value;
if ( vals.length > 10 ) {
this.setState({
inp: vals,
txt: "不能超過10個(gè)字符"
});
}
}
});
// 渲染
ReactDOM.render(
幾種約束性組件
select
通過value，或者defaultValue值來控制.
"use strict";
const Select = React.createClass({
// 初始化 狀態(tài)
getInitialState: function () {
return {
selectValue: ""
}
},
render: function () {
return (
);
},
changeSelect: function ( ev ) {
let vals = ev.target.value;
this.setState({
selectValue: vals
});
}
});
// render
ReactDOM.render(, document.querySelector(".app"));
如果使用ref來獲取表單元素中的內(nèi)容，使用default加前綴，例如： defaultValue,defaultChecked. 。通過refs來獲取值
"use strict";
const Checkbox = React.createClass({
getInitialState: function () {
return {
cb1: false,
cb2: false
}
},
render: function () {
return (
籃球
足球
);
},
showReslut: function () {
console.log( this.refs.cb1.checked, this.refs.cb2.checked );
},
change: function ( ev ) {
let cheVals = ev.target.checked;
this.setState({
"cb1": cheVals
});
}
});
// render
ReactDOM.render(
與其它庫一起使用
侵入式插件
并不一定是使用React的組件的生命周期事件
需要在componentDidMount和componentDidUnUpdate 放置其它庫的邏輯代碼.
也可以這種方式來綁定事件監(jiān)聽，甚至事件流
混合React支持混合， 將混合中的方法賦值到組件對象上。組件對象可以使用混合中定義的方法。
一般是自定義方法，放置mixin中。
使用混合，值是一個(gè)數(shù)組，復(fù)制多個(gè)對象上面的屬性和方法。混合可以看做是一種多繼承。
定義：
let MixinMethod = {}
使用：
mixins: [MixinMethod]Airbnb React 基本規(guī)則
每個(gè)文件只包含一個(gè)React組件
但是 無狀態(tài)，或者Pure組件允許一個(gè)文件包含多個(gè)組件。
始終使用JSX語法
不要使用React.createElement方法，除非初始化app的文件不是JSX格式.
一個(gè)組件實(shí)現(xiàn)一個(gè)功能。
組件的生命周期方法按照排序編寫
React組件的內(nèi)部方法命名不要使用下劃線前綴。
命名擴(kuò)展名： React組件使用.jsx擴(kuò)展名
文件名：文件名使用帕斯卡命名。 例如： ReservationCard.jsx
引用命名：React組件使用帕斯卡命名，引用實(shí)例采用駱駝命名
import reservationCard from "./ReservationCard"; const ReservationItem =
組件命名： 組件名稱應(yīng)該和文件名一致。 例如：Reservation.jsx 中 有一個(gè)Reservation 的引用名稱。但是，如果是在目錄中的組件，應(yīng)該使用 index.jex作為文件名并且使用文件夾名稱作為組件名.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90876.html
摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個(gè)月前出了248個(gè)Vue的知識點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個(gè)React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時(shí)發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時(shí)大...
摘要：中的元素組件實(shí)例和節(jié)點(diǎn)，是中關(guān)系密切的個(gè)概念，也是很容易讓初學(xué)者迷惑的個(gè)概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實(shí)例化后，每一個(gè)組件實(shí)例才有了自己的和，才持有對它的節(jié)點(diǎn)和子組件實(shí)例的引用。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項(xiàng)目中更加靈活地使用React。 React 中的元素、組件、實(shí)...
摘要：中的元素組件實(shí)例和節(jié)點(diǎn)，是中關(guān)系密切的個(gè)概念，也是很容易讓初學(xué)者迷惑的個(gè)概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實(shí)例化后，每一個(gè)組件實(shí)例才有了自己的和，才持有對它的節(jié)點(diǎn)和子組件實(shí)例的引用。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請注明作者及出處 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對React的理解...
摘要：在前端開發(fā)過程中，源碼解讀是必不可少的一個(gè)環(huán)節(jié)，我們直接進(jìn)入主題，注意當(dāng)前版本號。注意包文件僅僅是的必要的功能性的定義，它必須要結(jié)合一起使用下是，原生環(huán)境下是。 在前端開發(fā)過程中，源碼解讀是必不可少的一個(gè)環(huán)節(jié)，我們直接進(jìn)入主題，注意當(dāng)前 React 版本號 16.8.6。 注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結(jié)合 React...
摘要：內(nèi)部機(jī)制探秘和文末附彩蛋和源碼這篇文章比較偏基礎(chǔ)，但是對入門內(nèi)部機(jī)制和實(shí)現(xiàn)原理卻至關(guān)重要。當(dāng)然也需要明白一些淺顯的內(nèi)部工作機(jī)制。當(dāng)改變出現(xiàn)時(shí)，相比于真實(shí)更新虛擬的性能優(yōu)勢非常明顯。直到最終，會得到完整的表述樹的對象。 React 內(nèi)部機(jī)制探秘 - React Component 和 Element（文末附彩蛋demo和源碼） 這篇文章比較偏基礎(chǔ)，但是對入門 React 內(nèi)部機(jī)制和實(shí)現(xiàn)原...
摘要：本文翻譯自原作者如果有任何版權(quán)問題，請聯(lián)系當(dāng)你在組件中調(diào)用時(shí)，你覺得會發(fā)生什么當(dāng)然，會用這條狀態(tài)重新渲染組件并且更新匹配到的，然后返回元素。如果你之前使用過一些渲染器比如說，你可能知道在頁面中使用超過一個(gè)渲染器是沒什么問題的。 本文翻譯自：How Does setState Know What to Do?原作者：Dan Abramov 如果有任何版權(quán)問題，請聯(lián)系shuirong199...
閱讀 3020·2023-04-25 18:00
閱讀 2221·2021-11-23 10:07
閱讀 4060·2021-11-22 09:34
閱讀 1248·2021-10-08 10:05
閱讀 1571·2019-08-30 15:55
閱讀 3434·2019-08-30 11:21
閱讀 3338·2019-08-29 13:01
閱讀 1378·2019-08-26 18:26
