Node安裝

1:

......

JSX語法篇

在React的語法中,可以嵌入javascript表達式,方法是將其包裝在花括號之內(nèi)。

舉個栗子

{ 2+2 }  //輸出為4

   const user={
         name:'奧特曼'
      }
   const element=(<h1>大家好,我是{user.name},我今年{100+8}歲了</h1>)
   
   { user.name } //奧特曼
   //然后將其添加到我們的reactDom中
   reactDom.render({
           element,
           document.getElementById('root') //暫時不用管這句       
   })               
   
   //也可以作為某個標簽的屬性
   
   const Imgurl={
     url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494412107074&di=ebe4599822bb32b660014cdc6dd26862&imgtype=0&src=http%3A%2F%2Fimg27.51tietu.net%2Fpic%2F2017-011500%2F20170115001256mo4qcbhixee164299.jpg' //神秘圖片(/壞笑)
   }
   
   const el=(
       <img src={}> </img>
     )
   
     //然后將其添加到我們的reactDom中
   reactDom.render({
           el,
           document.getElementById('root') //暫時不用管這句       
   })               
   
   //元素標簽必須只能有一個標簽或者全部在一個DIV中,直接上代碼
   const element=(//這是對的
              <div>我只有一個標簽</div>   
    )
   
    const element=(   //這是對的
              <div>
                 <p>我是嵌套的</p>
                 <p>我是嵌套的</p>
                 <p>我是嵌套的</p>
               </div>   
     )
    
     const element=(   //這樣會報錯
              <div></div>   
              <p>我是嵌套的</p>
     )

JSX表示元素

//jsx表示元素有兩種寫法,這是第一種也是推薦的一種
const element=(
       <h1 className='xpc'> 
         類名是我名字的縮寫  (╯▽╰)    
       </h1>
)
//這是第二種
const elemen=React.createElement(
      'h1',  //這里表示元素名
      {className:'xpc'},//這里表示元素的屬性
      '類名是我名字的縮寫 (╯▽╰)' //這里表示元素的內(nèi)容 
) 
//至于為什么推薦第二種也是一目了然了,第一種簡單,下面這些內(nèi)容摘自官方文檔,可看可不看
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
}
//這些對象被稱為“React元素”络拌。你可以將它們看成是你想要在屏幕上看到的內(nèi)容评甜。React讀取這些對象史煎，并使用它們構(gòu)造DOM并保持最新。
//建議在你的編輯器上面安裝Babel語法插件,本人用的VsCode非常和諧

這時候咱們應該做一個簡單的小案例了,顯示美女圖片,直接上代碼

const user ={
  name:'xpc',
  lastname:'韋森莫.拉默衰.率的伊比',
  url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494412107'
  +'074&di=ebe4599822bb32b660014cdc6dd26862&imgtype=0&src=http%3A%2F%2Fimg27.51tietu.net%2Fpic%2F2017-011500%2F20170115001256mo4qcbhixee164299.jpg'
}


const time=()=>{
    const element=(
      <div>
          <div>hhh 時間為</div>
          <h2>It is {new Date().toLocaleTimeString() }</h2>
          <img src={user.url} alt=""/>
      </div>
    )
    ReactDOM.render(
  element, 
  document.getElementById('root')
);
}

setInterval(time,1000)

老子最煩的原理性的東西來了,雖然很強大,但是老子不喜歡

簡單的說就是歸react管理的DOM都放在一個DIV中,這個DIV稱之為根節(jié)點

   document.getElementById('root')
   //擁有這個rootID的元素就是根節(jié)點,和ng的ng-app一樣,
   //咱們寫的DOM元素等等都在這個DIV中渲染  
   //假設咱們的DOM改變了內(nèi)容,react會把這個更新了的DOM和原來的DOM進行比較,如果兩者有不同的地方則只更新不同的地方
   //想繼續(xù)了解的話右轉(zhuǎn)百度 ReactDiff算法

組件

組件簡單來說就是某個功能或者UI,一個按鈕可以稱之為一個組件,咱們的一整個網(wǎng)頁也可以稱之為一個組件,一個大組件由很多小組件構(gòu)成,而小組件由更多的小小組件構(gòu)成

摘自官方文檔

功能組件

定義組件最簡單的方法就是編寫一個javascript函數(shù)
function Welcome ( props){
  return <h1> hello,{props.name} </h1>
  //這個函數(shù)是一個有效的React組件,因為他接受一個"props"對象參數(shù)并與數(shù)據(jù)返回一個React對象
  //我們將這種組件稱之為功能組件
}
讓我們實用ES6類的方式來定義組件
class Welcome extends React.component {
  render (){
    return <h1> Hello,{this.props.name}<h1>
  }
 }
//怎么用?
 const a=< Welcome name='xpc' />
 然后將a放到咱們的render中

渲染組件

//這是我們遇到的代表Dom標簽的React元素
const element=<div />
//我們也可以這樣表示定義的組件
const = <Welcome name='Sara'> 
//當react看到定義的組件時,它將JSX屬性作為單個對象傳遞給該組件,我們稱這個對象為"道具"
  
警告 : 始終實用大寫字母啟動組件,意思就是組件不管咋樣開頭第一個字母必須是大寫,不信你試試。
       咱們的組件調(diào)用時,后面的 斜杠必須加上,不信你試試。 

組成部分

組件可以在輸出中引用其他組件沮焕。這使我們可以對任何級別的細節(jié)使用相同的組件抽象。

一個按鈕,輪播圖,導航欄,都可以稱之為組件拉宗。

讓我們寫一個按鈕,點擊彈出登陸成功,上代碼

var btn=()=>{
  alert('登陸成功')
}

class Login extends React.Component{
        render (){
          return <input type='button' value={this.props.name} onClick={this.props.ock} className='xpc'/> 
        }
}


const el=<Login name='點擊我' ock={btn}/>

ReactDOM.render(
  el,
  document.getElementById('root')
);

// 讓我們看一下這段代碼發(fā)生了什么
// 1:首先咱們定義了一個類,這個類繼承自React中的Component這個東西
// 2:然后這個類中有一個render方法,這個方法返回了一個DOM對象
// 3:這時候咱們的react看到咱們定義了一個組件,用咱們的JSX語法將咱們的道具傳遞到咱們的類
// 4:咱們的react通過JSX語法看到了有一個click事件,這個事件調(diào)用了btn函數(shù),再次尋找到btn這個函數(shù)
// 5:最后咱們el就是一個完整的DOM對象,有類名,有點擊事件等等...
// 6:進入頁面點擊按鈕,顯示登陸成功

// 關于這部分我不想打太多字,誰叫我懶呢峦树。不過這一部分個人感覺又是挺重要的,所以還是寫了這幾步。
// 整個過程類似咱們的構(gòu)造函數(shù)和繼承

篇幅太多,下次再說

提取組件

不要被提取組件這四個字困擾,其實就是這么說吧旦事。

每個組件應該易于維護,應該是一個大的組件中包含更多的小組件,這樣維護的話會更加方便魁巩。

直接上代碼

const Ass=(props)=>{
   return (
     <div>
       <div className={props.class}>
          <img src={props.one.url} />
       </div>

       <div className={props.class}>
         <h1>{props.h1}</h1>
       </div>

       <div className={props.class}>
          <input type={props.type} value={props.val}/>
       </div>
     </div>
   )
}

把這個組件看成頁面中的一個組件的話,三個DIV分別是三個小組件,是一個完整的組件。

這樣的話不容易維護,不容易開發(fā),代碼可讀性下降,代碼重用性降低

算 了,還是直接上代碼吧

//此時我們應該做的是將里面小組件提取出來,這樣的好處是顯而易見的,可讀性/可維護性姐浮。

var dt={
  one:{
    url:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494474659&di=9160621335f3050d9040f74b269eba77&src=http://img27.51tietu.net/pic/2017-011500/20170115001256mo4qcbhixee164299.jpg'
  },
  two:{
    h1:'辛啊啊啊啊啊'
  },
  there:{
    ty:'button',
    val:'哈哈哈哈哈哈哈'
  }
}


class Ass extends React.Component{
  render (){
    return    <div>
       <div className='xpc1'>
         <One user={this.props.props.one}/>
       </div>
       <div className='xpc1'>
          <Two user={this.props.props.two}/>
       </div>
       <div className='xpc1'>
          <There user={this.props.props.there}/>
       </div>
     </div>
  }
}


//第一個小組件
class One extends React.Component{
  render (){
    return <img src={this.props.user.url}/>
  }
}
//第二個小組件
class Two extends React.Component{
  render (){
    console.log(this)
    return <h1>{this.props.user.h1}</h1>
  }
}
//第三個小組件
class There extends React.Component{
  
  render (){
    return <input type={this.props.user.ty}  value={this.props.user.val} />
  }
}
const Asss=<Ass  props={dt}/>;

ReactDOM.render(
  Asss,
  document.getElementById('root')
);

//這里涉及的組件傳值不要關注,關注的是組件的提取

這里咱們看一下組件之間的道具

https://facebook.github.io/react/docs/components-and-props.html
這個網(wǎng)址最后一塊是組件之間的道具

狀態(tài)和生命周期

到了現(xiàn)在,咱們只會一種更新DOM的方式,就是用非常傻叉的定時器,這次咱們學點不那么傻叉的谷遂。

首先,咱們用一種傻叉1.0的方式寫一個時鐘,因為不想寫,所以沒有那么好看。

 class Clock extends React.Component {
   render (){
     console.log(this.props.date)
     return <div>
     <img src={dt.one.url}/>
     <h1>{this.props.date.toLocaleTimeString()}</h1>
     </div>
   }
 }
var tick =()=>{
ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('root')
);
}

setInterval(tick,1000)


//略顯傻叉,咱們在換一種方式
//但是建議使用類的方式寫,類其實就是構(gòu)造函數(shù)的另一種寫法

這時候使用我們的類的方式改造一下我們的代碼

 class Clock extends React.Component {
   constructor(props){
     super(props)
     this.state={date:new Date()} 
   }
   render (){
     return <div>
     <img src={dt.one.url}/>
     <h1>{this.state.date.toLocaleTimeString()}</h1>
     </div>
   }
 }
var tick =()=>{
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
}

setInterval(tick,1000)
//下面我們看一下將=生命周期方法添加到類中

將 生命周期方法添加到類中

在許多具有組件的程序中,釋放組件在銷毀時所占用的資源非常重要卖鲤。

第一次渲染DOM時,我們需要時間器,這在react中稱之為"掛載",

我們想要清楚這個定時器,只要將這個類刪除就好,這在react中稱之為卸載肾扰。

當組件掛在和卸載時,我們可以在組件上聲明特殊的方法來運行這些代碼畴嘶。

 class Clock extends React.Component {
   constructor(props){
     super(props)
     this.state={date:new Date()} 
   }

   
  componentDidMount(){
    this.itmerID=setInterval(()=>this.tick(),1000)
  }

  componentWillUnmount(){
    clearInterval(this.itmerID)
  }
  
  tick(){
    this.setState({
      date:new Date()
    })
  } 

   render (){
     return (
          <div>
              <img src={dt.one.url}/>
              <h1>{this.state.date.toLocaleTimeString()}</h1>
          </div>
     )
   }
 }

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
//這是咱們修改之后的代碼
//關于這兩個生命周期的方法
// 1: componentDidMount           2:componentWillUnmount
// 百度！

算了我還是解釋解釋吧

componentDidMount : 意思就是當咱們的DOM元素渲染出來之后開始執(zhí)這個函數(shù)里面的代碼,類似咱們Vue中的Created鉤子函數(shù).也可以通過this.getDOMNode()訪問到真實的DOM元素,此時可以使用其他的類庫來操作這個DOM;

componentWillUnmount : 意思是當咱們掛載了一個組件之后,當咱們不需要這個組件的時候咱們需要將這個組件卸載,類似于浮動與清除浮動的關系,是關系!不是作用!

其他的明天再說!