學習React不是一蹴而就的事情，入門似乎也沒那麼簡單。但我覺得這一切都是值得的。
這是我在學習React中的一些心得，希望能夠幫助到大家！
樣式
先從最簡單的樣式講起吧
React可以使用兩種樣式，一種是普通的css，一種是在React中定義的樣式。
普通的css樣式，通過className=""來引用
賬號:
React中定義的樣式，通過style={}來引用
//React的css樣式
var style_1={
color:'#9900ff',
padding:3,
}落葉丶Fly的React小站
組件
構建組件（名字隨意起，首字母要大寫），我這裡構建了一個叫Board的組件，然後通過getInitialState進行初始化。通過ReactDOM.render加載到html頁面中。如果ReactDOM.render中有多個組件或者標籤，則需要用一個div標籤來包裹。
var Board = React.createClass({
//初始數據
getInitialState: function(){
return ({
comments: [{account:"123456",name:"落葉丶Fly"},{account:"111111",name:"啦啦啦"}]
});
},
//初始化
eachComment: function(text,i){
return (
賬號:
{text.account}
用戶名:
{text.name}
);
},
ReactDOM.render(
//需要用一個div標籤來包裹
落葉丶Fly的React小站
,
document.getElementById('container')
);
props和state
state：React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然後渲染 UI，讓用戶界面和數據保持一致。React 裡，只需更新組件的 state，然後根據新的 state 重新渲染用戶界面（不要操作 DOM）。
props：state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什麼有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。
函數
React中的button點擊事件和普通的JavaScript差不多，但是要注意onClick中的C要大寫，否則會報錯。本文通過按鈕點擊來更改editing的布爾值，用setState函數進行更新，從而在普通模式與編輯模式中切換。
//編輯
edit: function(){
this.setState({editing: true});
},
//保存
save: function(){
var val = this.refs.new_account.value;
var val1 = this.refs.new_name.value;
console.log("拿到的值是: " + val+val1);
this.props.updateCommentText(val,val1,this.props.index)
this.setState({editing: false});
},
//普通模式
renderNormal:function(){
return (
{this.props.children}
);
},
//編輯模式
renderForm:function(){
let children = this.props.children
return (
)
},
//模式更改
render: function (){
//console.log(this.props)
if(this.state.editing){
return this.renderForm();
}else{
return this.renderNormal();
}
}
全部代碼
React-Template
分享到:
閱讀更多 前端嫣然呀呀呀 的文章
關鍵字: 講起 技術 JavaScript
