[JavaScript知识库]React学习笔记（一）

React的特点

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
2.在React Native中可以使用能React语法进行移动端开发。
3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

关于虚拟DOM:

1.本质是Object类型的对象(一般对象)
2.虚拟DOM比较”轻“，真实DOM比较”重，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被转化为真实DOM，呈现在页面上。

相关js库文件

<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>

创建一个React实例
准备好一个容器

<div id="test"></div>

1.创建虚拟DOM

const VDOM =  <h1 id="title"><span>Hello,React</span></h1>  /* 此处一定不要写引号，因为不是字符串 */

或

	const titleId = 'tItLe';
     const content = 'Hello,REaCt';
    const VDOM = (
       <div>
             <h1 id={titleId.toLowerCase()} className="title">
                 <span style={{color: '#fff',fontSize: '32px'}}>{content.toUpperCase()} &lt;/span>
            </h1>
            <input type="text" />
       </div>
    )

2.渲染虚拟DOM到页面

   ReactDOM.render(VDOM,document.getElementById("test"));

jsx语法规则

1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{ }
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件。若组件没有定义，则报错。

创建函数式组件

<div id="test2"></div>
<script type="text/babel">
	function MyComponent(){
            console.log(this); // 此处的this是undefined，因为babel编译后开启了严格模式
            return <h2>我是函数定义的组件(使用于【简单组件】的定义)</h2>
     }
     ReactDOM.render(<MyComponent/>,document.getElementById('test2'))
        
	/*
		分析：
            执行了ReactDom.render(<MyComponent/> ...)之后,发生了什么?
                1.React解析组件标签，找到了MyComponent组件
                2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面上。
        */
 </script>

创建类式组件

<div id="test3"></div>
<script type="text/babel">
	class MyComponent2 extends React.Component {
        render() {
         // render是放在哪里的？ —— MyComponent2的原型对象，供实例使用。
         // render中的this是谁？ —— MyComponent2的实例对象 <=> MyComponent2组件实例对象
         console.log(this);
            return <h1>我是用类定义的组件(使用于【复杂组件】的定义)</h1>
          }
      }
      ReactDOM.render(<MyComponent2/>,document.getElementById('test3'));
      /*
      	分析：
            执行了ReactDom.render(<MyComponent2/> ...)之后,发生了什么?
                1.React解析组件标签，找到了MyComponent2组件
                2.发现组件是使用类定义的，随后new出来该实例对象,并通过实例调用到原型上的render方法
                3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面上
        */
</script>