React学习之路 一

因为近期刚刚接触到相关的项目，就准备记录一下自己学习react从入门到放弃的一个过程
注：本文章有借鉴，有自我理解，如果有错误请指正，谢谢。

一、什么是React？

1.1，react概念：

1. React是用于构建用户界面的JavaScript框架。（我的理解：就是通过原生js封装的一个框架，类似jquery）

1.2，react和jquery的区别：

1. 本质上，React是一个UI库，而JQuery是一个工具库或者说是插件库。（但是实际上jquery也有自己的UI库）
2. 对Dom操作的不同，React提供了一整套的虚拟Dom，所有的操作都在虚拟的Dom上而并非真实的Dom，而Jquery操作的是真实Dom。（当然，这几乎是所有的UI库与jquery的区别）
   

二、简单使用React

2.1，引用

<!--React 的核心库-->
<script type="text/javascript" src="../../js/react.development.js"></script>
<!--提供与 DOM 相关的功能-->
<script type="text/javascript" src="../../js/react-dom.development.js"></script>
<!--Babel 可以将 ES6 代码转为 ES5 代码，并且Babel 内嵌了对 JSX 的支持。-->
<script type="text/javascript" src="../../js/babel.min.js"></script>

2.2，调用
就让我们开始一个简单的hello react！吧

<div id="test"></div>
<script type="text/babel">
	//创建虚拟dom
    const v_dom = <h1>Hello React!</h1>
    //渲染真实dom
    ReactDOM.render(v_dom ,document.getElementById('test'), function (){
        console.log('渲染完毕');
    })
</script>

三、创建虚拟dom的两种方式

3.1，使用React的createElement方法创建

 <div id="test"></div>
 <script type="text/javascript">
      /**
       * 创建一个span标签，内容为Hello React
       */
      const v_span = React.createElement('span',{},'Hello React');
      /**
       * 创建h1标签作为span的父标签 id为v_dom
       */
      const v_dom = React.createElement('h1',{id: 'v_dom'},v_span);
      /**
       * 渲染虚拟dom
       */
      ReactDOM.render(v_dom,document.getElementById('test'));
  </script>

3.2使用jsx语法创建

 <div id="test"></div>
 <script type="text/babel">
 	/**
 	 * 创建虚拟dom
 	 */
     const v_dom = (
         <h1 id='v_dom'>
             <span>Hello React</span>
         </h1>
     );
     /**
      * 渲染虚拟dom
      */
     ReactDOM.render(v_dom, document.getElementById('test'));
 </script>

四、jsx语法

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<script type="text/babel">
    console.time("timer");
    /**
     * 1.创建标签简单写法
     */
    const v_dom_1 = (
        <h3>创建h3标签简单写法v_dom_1</h3>
    );
   
    /**
     * 2.在JSX中计算表达式，直接使用一层{}花括号即可
     */
    const v_dom_2 = (
        <div>
            <span>这是小写,v_dom_2</span>
            <span>这是大写,{'v_dom_2'.toUpperCase()}</span>
        </div>
    );

    /**
     * 3.在JSX中定义属性,直接声明字符串变量即可，或者通过计算表达式方式取值，注意的是，行内样式的定义必须用双花括号
     */
    const v_dom_3 = (
        <div>
            <p id="content" className="skyblue">使用类样式时,class要替换为className</p>
            <p style={{ color: 'red', fontSize: '18px' }}>行内样式设置的段落标签</p>
        </div>
    );

    /**
     * 4.利用jsx遍历一个列表
     */
    const data= ['v_dom_1','v_dom_2','v_dom_3']
    const v_dom_4 = (
        <div>
            <ul>
                {
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    ReactDOM.render(v_dom_1,document.getElementById('test1'));
    ReactDOM.render(v_dom_2,document.getElementById('test2'));
    ReactDOM.render(v_dom_3,document.getElementById('test3'));
    ReactDOM.render(v_dom_4,document.getElementById('test4'));
</script>

实现效果

…