05月01, 2018

React学习之旅 (02) -- jsx深入

jsx本身经过babel转换之后,就是一个普通js对象,jsx可以随意和if、 for、 复制给变量、 参数传递、当返回值传递搭配使用。

比如可以用展开运算符批量设置属性

React元素是构成React应用的最小单位

当整体通过定时器或其他方式更新一片React代码的时候,只会更新局部,这也是性能高的一种体现

注意:React元素中 {} 不能直接输出对象

还是栗子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>来捡漏 React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
        let json = {
            id: 'tit',
            className: 'title',
            title: '这是标题'
        };

        function foo(str)
        {
            if(str === 'login')
            {
                return <h2 {...json} >登录模式</h2>
            }
            else
            {
                return <p>游客模式</p>
            }
        }
        var a = <div>
            {foo('login')}
        </div>;
        ReactDOM.render(a, document.getElementById('root'));
    </script>
  </body>
</html>

本文链接:http://www.laijianlou.top/post/react-02.html

-- EOF --

Comments