react-jxs語法(四)

不少人可能認爲jsx很簡單,以爲它只是javascript+xml，事實上真的是這樣
嗎？我最學習一些關於jsx的用法的相關知識發現這個語法遠沒有想象得那麼簡單,
下面簡單分享一下當心得,但願對你們有幫助
首先咱們得理解一下react的設計理念 react認爲ui界面和js在底層渲染中存
在很強的耦合性,好比咱們改變數據時視圖會被從新渲染,視圖渲染時也會影響到數據。
 寫過react的都知道咱們能夠在js裏寫html,css樣式。
 all in js就是什麼均可以寫在js裏面,不少人以爲react很亂,不少方法都要
本身實現,剛開始我也認爲這種寫法好繁瑣,學習了一段時間react以後感受這種設計
思路相對於高度封裝的框架更靈活,很是相似原生js的開發，同時又巧妙避開原生js
開發的不少缺陷,如數據易污染，兼容性很差等問題。
jsx在react中大量使用,不少文章介紹的jsx容易讓人誤認爲它就是在js裏寫html
別的沒了,這樣的想法很可怕的這也是我想寫這篇文章的緣由但願能分享點本身的心得
幫助你們進一步認識jsx

jsx概念:jsx是一種js語法擴展，它能夠用來描述咱們的ui界面能夠和js一塊兒使用。
1、jsx中數據類型的顯示:

1.number、string、array
    2.不會被顯示的類型:null,undefined,boolean
    3.注意：對象object不能直接寫在jsx的{}中,會報錯

class App extends React.Component{
            constructor(){
                super()
                this.state={
                   numbers:123,
                   strings:'i am string',
                   arrays:[1,2,3,4,5],
                   booleans:true,
                   objects:{
                       name:'react',
                       age:30
                   },
                   nulls:null,
                   undefineds:undefined
                }
            }
            render(){
            //解構賦值
                let {numbers,strings,arrays,booleans,objects,nulls,undefineds}=this.state
                return (
                    <div>
                      <h3>{numbers}</h3>
                      <h3>{strings}</h3>
                      <h3>{arrays}</h3>
                      <!--如下代碼不會在頁面顯示-->
                      <h3>{booleans}</h3>
                      <h3>{nulls}</h3>
                      <h3>{undefineds}</h3>
                    </div>
                );
            }                    
        }

        ReactDOM.render(<App/>,document.getElementById('root'))

下面簡單分析一下爲何null,boolean,undefined爲何不能被頁面渲染出來
咱們在{}中寫一些表達式，假如條件不成立或者數據爲空，頁面顯示爲null或者undefined,true,false是很是不合理的，react這麼設計也是爲了不這個問題若是咱們想要要在頁面中展現它們能夠將他們轉成字符串，使用toString()方法,或者和字符串拼接(變量+"")或者String()強制轉換

對象直接寫在大括號內會報錯

jsx中嵌入表達式的情形

class App extends React.Component{
            constructor(){
                super()
                this.state={
                  isShow:true
                }
            }
            render(){
               
                return (
                    <div>
                    <!--三元運算-->
                        <h1>{this.state.isShow?'i am show':'nothing'}</h1>
                        <!--函數調用 本身調用的 this指向自身不須要bind-->
                        {this.testFn()}
                        <!--運算-->
                        {100*20}
                     </div>
                );
            }

            testFn(){
                console.log('hello')
            }                 
        }

        ReactDOM.render(<App/>,document.getElementById('root'))

分享結束啦~~ 剩下的jsx知識後續補充