學(xué)習(xí)React之(自我感覺良好的學(xué)習(xí)之路)

不管是否現(xiàn)有的項(xiàng)目能不能用上踏志,我們還是要去學(xué)習(xí)一下自己覺得有意思和有必要的一些東西胀瞪,比如React

React 用于構(gòu)建用戶界面的javascript庫

其實(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)用

使用propsstate,我們可以創(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);

*注意方法名的大小寫書寫格式锻霎。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末揪漩,一起剝皮案震驚了整個(gè)濱河市氢拥,隨后出現(xiàn)的幾起案子锨侯,更是在濱河造成了極大的恐慌冬殃,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件深滚,死亡現(xiàn)場(chǎng)離奇詭異涣觉,居然都是意外死亡痴荐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門官册,熙熙樓的掌柜王于貴愁眉苦臉地迎上來生兆,“玉大人,你說我怎么就攤上這事膝宁⊙荒眩” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵员淫,是天一觀的道長(zhǎng)合蔽。 經(jīng)常有香客問我,道長(zhǎng)介返,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任圣蝎,我火速辦了婚禮刃宵,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘捅彻。我一直安慰自己组去,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布步淹。 她就那樣靜靜地躺著从隆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪缭裆。 梳的紋絲不亂的頭發(fā)上键闺,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音澈驼,去河邊找鬼辛燥。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的挎塌。 我是一名探鬼主播徘六,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼榴都!你這毒婦竟也來了待锈?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤嘴高,失蹤者是張志新(化名)和其女友劉穎竿音,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拴驮,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡春瞬,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了套啤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宽气。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖潜沦,靈堂內(nèi)的尸體忽然破棺而出抹竹,到底是詐尸還是另有隱情,我是刑警寧澤止潮,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站钞楼,受9級(jí)特大地震影響喇闸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜询件,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一燃乍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宛琅,春花似錦刻蟹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至红伦,卻和暖如春英古,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背昙读。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工召调, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓唠叛,卻偏偏與公主長(zhǎng)得像只嚣,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子艺沼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中册舞。 1. Hello world 這段代碼將一個(gè)一級(jí)標(biāo)題插入到指...
    ryanho84閱讀 6,221評(píng)論 0 9
  • 最近看了一本關(guān)于學(xué)習(xí)方法論的書,強(qiáng)調(diào)了記筆記和堅(jiān)持的重要性澳厢。這幾天也剛好在學(xué)習(xí)React环础,所以我打算每天堅(jiān)持一篇R...
    gaoer1938閱讀 1,670評(píng)論 0 5
  • 深入JSX date:20170412筆記原文其實(shí)JSX是React.createElement(componen...
    gaoer1938閱讀 8,048評(píng)論 2 35
  • 本筆記基于React官方文檔,當(dāng)前React版本號(hào)為15.4.0剩拢。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,649評(píng)論 14 128
  • GUIDS 第一章 為什么使用React线得? React 一個(gè)提供了用戶接口的JavaScript庫。 誕生于Fac...
    jplyue閱讀 3,519評(píng)論 1 11