資訊專欄INFORMATION COLUMN
摘要：將模板語言轉(zhuǎn)為語言，并插入組件組件類第一個字母必須大寫對象屬性與組件屬性一一對應。是例外，它表示組件的所有節(jié)點組件的屬性可以接受任意值。需要一種驗證機制，驗證別人使用組件時提供的參數(shù)是否合法獲取真實節(jié)點組件的是。
初始化
引入三個script:
第一個是React的核心代碼，第二react-dom.js是React里面操作DOM的部分，第三個browser.js將JSX轉(zhuǎn)為Javascript語法。
ReactDOM.render將模板語言轉(zhuǎn)為HTML語言，并插入DOM
ReactDOM.render(
Test,
document.body
);
組件
組件類第一個字母必須大寫
var Hello = React.createClass({
render: function(){
return Hello ,{this.props.name}
}
})
ReactDOM.render(
this.props.children
this.props對象屬性與組件屬性一一對應。this.props.children是例外，它表示組件的所有節(jié)點
var NotesList = React.createClass({
render: function(){
return (
{
React.children.map(this.props.children, function(child){
return - {child}
})
}
);
}
});
ReactDOM.render(
Hello
world
,
document.body
);
PropTypes
組件的屬性可以接受任意值。需要一種驗證機制，驗證別人使用組件時提供的參數(shù)是否合法
var Title = React.createClass({
propTypes: {
title: React.propTypes.string.isRequired,
},
render: function(){
return {this.props.title}
}
});
獲取真實DOM節(jié)點
組件的是virtual DOM。需要獲取真實DOM節(jié)點時，要用到ref屬性
var Component = React.createClass({
handleClick: function(){
this.refs.myTextInput.focus();
},
render: function(){
return (
)
}
})
ReactDOM.render(
this.state
React的狀態(tài)機，狀態(tài)的變化可以出發(fā)重新渲染UI
var LikeButton = React.createClass({
getInitialState: function(){
return {liked: false};
},
handleClick: funtion(event){
this.setState({liked: !this.state.liked});
},
render: function(){
var text = this.state.liked ? "like" : "dont like";
return(
)
}
})
ReactDOM.render(
組件的生命周期
組件的生命周期有三個狀態(tài):
Mounting: 已插入真實DOM Updating: 正在被重新渲染 Unmounting: 已移出真實DOM
React為每個狀態(tài)提供兩種處理函數(shù)，will在進入狀態(tài)前調(diào)用，did函數(shù)在進入狀態(tài)后調(diào)用，共五中處理函數(shù):
componentWillMount() componentDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object preState) componentWillUnount()
還有兩種特殊狀態(tài)的處理函數(shù)：
componentWillReceiveProps(object nextProps): 已加載組件收到新的參數(shù)時調(diào)用 shouldComponentUpdate(object nextProps, object nextState): 組件判斷是否重新渲染時調(diào)用
Demo:
var Hello = React.createClass({
getInitialState: function(){
return {
opacity: 1.0
}
},
componentDidMount: function(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity += 0.05;
if(opacity < 0.1){
opacity = 1.0;
}
this.setState({
opacity: opacity
})
}.bind(this), 100)
},
render: function(){
return (
Hello {this.props.name}
)
}
});
ReactDOM.render(
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79875.html
摘要：在開發(fā)項目時，可以先用網(wǎng)頁的形式開發(fā)項目，等到網(wǎng)頁項目部分差不多完成后，再注入中，開發(fā)網(wǎng)頁項目部分和窗體部分的交互在中使用后，將不會打包有關的代碼 electron是一兩年前挺火的一個框架本質(zhì)上是一個瀏覽器，但是集成了很多windows系統(tǒng)的功能，讓前端開發(fā)也可以直接操作windows的窗體，做成一個實打?qū)嵉淖烂孳浖?團隊主要的技術棧是react，所以考慮用react開發(fā)，方便維護。 ...
摘要：新聞第期新聞中更好的列表視圖官方博客近日發(fā)表了新的列表組件的消息，三月份的候選版本的中，加入了三種新的與組件，可以針對不同情況需求而使用，這三個新組件的數(shù)據(jù)來源，都可以對外部的數(shù)據(jù)流框架或進行搭配使用。目前中的類似功能仍然在草案中。 ReactJS新聞 第021期 (2017.03.26) 新聞 React Native中更好的List Views(列表視圖) React Naive...
摘要：我們專注移動體育領域的應用開發(fā)，倡導開放共享的精神，不模仿，不跟風，只做酷的產(chǎn)品。這就是正在做的事情，我們希望通過科技驅(qū)動，讓更多的人熱愛健身，喜歡運動。 序 因為自己不大喜歡喜歡用手機，所以當在手機上看到有些應用只能在手機上使用時覺得好別扭，但我本身也不是寫移動App的，只是會寫點 js，都說js啥都能干，那我就用它干！ 關于 Keep Keep 是一個熱愛運動的年輕團隊，同時也是一...
摘要：下一步我們將結(jié)果輸出到文件。這是我們用編寫的第一個非常簡單的組建。使用將創(chuàng)建的組建導出以便在其它地方能夠正常導入使用。 這是React和ECMAScript6結(jié)合使用系列文章的第一篇。 本文出自從零到壹全棧部落 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類，方法綁定（第三部分） ES6中Reac...
閱讀 1449·2023-04-25 16:45
閱讀 1950·2021-11-17 09:33
閱讀 2360·2021-09-27 14:04
閱讀 941·2019-08-30 15:44
閱讀 2664·2019-08-30 14:24
閱讀 3446·2019-08-30 13:59
閱讀 1720·2019-08-29 17:00
閱讀 919·2019-08-29 15:33
