溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“React的基礎知識點整理”，在日常操作中，相信很多人在React的基礎知識點整理問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React的基礎知識點整理”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
專注于UI
在MVC分層設計模式中，react常被拿來實現視圖層(V)。
React不依賴于技術棧的其他部分，因此可以方便的在現有項目中嘗試用它來實現一個小特性。
虛擬DOM
React從DOM中抽象出來，給出一種更簡潔的編程模型，且性能表現更好。能夠通過NodeJS實現服務端渲染，通過React Native開發原生app。
數據流
React實現單向、響應式數據流，減少boilerplate且比傳統數據綁定更容易理解。
簡潔的組件
React的組件都實現了一個render()方法，它接收輸入的數據并返回要顯示的內容。這個例子中我們使用JSX(類XML語法)來編寫代碼。render()方法通過this.props屬性來訪問輸入的數據。
React并不強制要求開發者使用JSX。在“編譯的JS”中可以查看JSX生成的原始Javascript代碼。
// JSX code
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);
// compiled javascript code
var HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
React.render(React.createElement(HelloMessage, {name: "John"}), mountNode); |
帶狀態的組件
除了可以通過this.props訪問輸入數據之外，組件還可以通過this.state來維持他的內部狀態數據。當一個組件的狀態數據改變時，組件將重新調用render()方法來重繪。
// JSX code
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
React.render(<Timer />, mountNode);
// compiled javascript code
var Timer = React.createClass({displayName: "Timer",
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
React.createElement("div", null, "Seconds Elapsed: ", this.state.secondsElapsed)
);
}
});
React.render(React.createElement(Timer, null), mountNode); |
到此，關于“React的基礎知識點整理”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
