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