不管是否現(xiàn)有的項(xiàng)目能不能用上踏志,我們還是要去學(xué)習(xí)一下自己覺得有意思和有必要的一些東西胀瞪,比如React
其實(shí)我就是想知道React是干嘛用的凄诞,有什么用,和其他的比起來好用在哪伪朽?
既然要學(xué)就先看下官網(wǎng)是如何介紹的汛蝙,Google或者百度React 然后出現(xiàn)了官網(wǎng)朴肺,(英語太爛就先看中文網(wǎng))
第一句話就是“用于構(gòu)建用戶界面的javascript庫”宇挫,好吧還是不太了解到底是干嘛的酪术。(羅里吧嗦的沒什么有用的翠储,這就是自己沒事瞎寫的,感覺這樣好玩才這樣記)
先不著急開始庐舟,先看看首頁都有啥東西
出現(xiàn)了三個(gè)說明文字那就先讀一讀說的啥
聲明式
React可以非常輕松的創(chuàng)建用戶交互界面住拭。(哪里輕松一會(huì)要試試)為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)潔的視圖(就是封裝了一堆常用交互類庫唄,和jquery啥區(qū)別杠娱?)在數(shù)據(jù)改變時(shí)谱煤,React也可以高效的更新渲染界面(同步更新?)室叉。以聲明式編寫UI(啥是聲明式)硫惕,可以讓你的代碼更加可靠,且方便調(diào)試踪旷。(更加可靠什么鬼缚柳?)
組件化
創(chuàng)建好擁有各自狀態(tài)的組件(就是模塊分類唄),再由組件構(gòu)成更加復(fù)雜的界面彩掐。(然后模塊整合)無需再用模板代碼(那就是替代html界面咯)通過使用javascript編寫的組件你可以更好的傳遞數(shù)據(jù)灰追,將應(yīng)用狀態(tài)和DOM拆分開了(這個(gè)好處到底在哪?)
一次學(xué)習(xí)朴下,隨處編寫
無論你現(xiàn)在正在使用什么技術(shù)棧(啥是技術(shù)棧殴胧,jquery算不),你都可以隨時(shí)引入React開發(fā)新特性团滥。(具體啥特性我現(xiàn)在還不知道呢灸姊?)React也可以用作開發(fā)原生應(yīng)用框架ReactNative
看完了后雖然還是不了解,但是卻有一些想要知道了解的地方碗誉,那就繼續(xù)往下看吧父晶。開始有使用例子了
組件
React組件使用一個(gè)名為
render()
的方法,接收數(shù)據(jù)作為輸出(我已經(jīng)偷偷的用筆記下了render這個(gè)單詞‘給予’,英語這么爛為什么還要學(xué)編程俺猿。。我愿意管得著嗎)輸出頁面中對(duì)應(yīng)展示的內(nèi)容诵冒。(就和js中write()差不多)下面示例中類似XML的寫法被稱為JSX谊惭。輸入的數(shù)據(jù)通過this.props
傳入render()
方法。
class helloWorld extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
)
}
}
ReactDOM.render(
<HelloWorld name="duxian" />,
mountNode
);
使用React的時(shí)候也可以不使用JSX語法豹芯,你可以在Babel REPL 查看JSX是如何被渲染成原生javascript代碼的
有狀態(tài)組件
除了使用外部傳入的數(shù)據(jù)以外(通過
this.props
訪問傳入數(shù)據(jù))铁蹈,組件還可以擁有其內(nèi)部的狀態(tài)數(shù)據(jù)(通過this.state
訪問狀態(tài)數(shù)據(jù))众眨。當(dāng)組件的狀態(tài)數(shù)據(jù)改變時(shí),組件會(huì)調(diào)用render()
方法重新渲染沿腰。
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {jishi : 0};
}
tick() {
this.setState(prevState => ({
jishi: prevState.jishi + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>計(jì)時(shí)開始:{this.state.jishi}</div>
);
}
}
ReactDOM.render(
<Timer />,mountNode
);
應(yīng)用
使用
props
和state
,我們可以創(chuàng)建一個(gè)簡(jiǎn)易的TODO應(yīng)用颂龙,下面這個(gè)示例中,我們使用state
來保存現(xiàn)有的待辦事項(xiàng)列表及用戶的輸入友雳。與此同時(shí)铅匹,我們也使用了內(nèi)聯(lián)的方法添加了事件處理函數(shù)饺藤,他們將通過事件代理被收集和調(diào)用涕俗。
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {items:[],text:''};
this.handleSubmit=this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
render() {
return (
<div>
<h3>Todo</h3>
<TodoList items={this.state.items} / >
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.state.text} />
<button>Add #{this.state.items.length + 1}</button>
</form>
</div>
);
}
handleChange(e){
this.setState({text:e.target.value})
}
handleSubmit(e){
e.preventDefault();
if(!this.state.text.length){
return;
}
const newItem={
text:this.state.text,
id:Date.now()
}
this.setState(prevState => ({
items:prevState.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component{
render(){
return (
<ul>
{this.props.items.map(item =>(
<li key={item.id}>{item.text}</li>
))}
</ul>
)
}
}
ReactDOM.render(<TodoApp />, mountNode);
在組件中使用第三方庫
React 是使用非常靈活再姑,并且提供了可以調(diào)用其他第三方框架或庫的接口。下面這個(gè)示例就使用了一個(gè)用來渲染Markdown語法绍填,名為remarkable的庫栖疑。它可以實(shí)時(shí)轉(zhuǎn)換渲染
<textarea>
里的內(nèi)容。
class MarkdownEditor extends React.Component{
constructor(props){
super(props);
this.state = {value: '# React提供了第三方框架接口卿闹。'}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
this.setState({value:e.target.value});
}
getRawMarkup() {
const md = new Remarkable();
return { __html: md.render(this.state.value)}
}
render(){
return(
<div className="MarkdownEditor">
<h3>輸入框</h3>
<textarea onChange={this.handleChange} defaultValue={this.state.value}/>
<h3>輸出</h3>
<div className="content" dangerouslySetInnerHTML={this.getRawMarkup()}>
</div>
</div>
)
}
}
ReactDOM.render(<MarkdownEditor />, mountNode);
*注意方法名的大小寫書寫格式锻霎。