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一起使用。
一、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 (
                    

{numbers}

{strings}

{arrays}

{booleans}

{nulls}

{undefineds}

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

image.png
下面简单分析一下为什么null,boolean,undefined为什么不能被页面渲染出来
我们在{}中写一些表达式,假如条件不成立或者数据为空,页面显示为null或者undefined,true,false是非常不合理的,react这么设计也是为了避免这个问题如果我们想要要在页面中展示它们可以将他们转成字符串,使用toString()方法,或者和字符串拼接(变量+"")或者String()强制转换

image.png

对象直接写在大括号内会报错

image.png

jsx中嵌入表达式的情形

class App extends React.Component{
            constructor(){
                super()
                this.state={
                  isShow:true
                }
            }
            render(){
               
                return (
                    

{this.state.isShow?'i am show':'nothing'}

{this.testFn()} {100*20}
); } testFn(){ console.log('hello') } } ReactDOM.render(,document.getElementById('root'))

分享结束啦~~ 剩下的jsx知识后续补充

你可能感兴趣的