[JavaScript知识库]第一章：React入门

1.1 官网

1.英文官网?https://reactjs.org/

2.中文官网?https://react.docschina.org/

1.2?React的基本使用

1.2.1 相关js库

1.react.js:React 核心库

2.react-dom.js:提供操作DOM的react扩展库。

3.babel.min.js:解析JSX语法代码转为JS代码的库。

1.2.2 使用JSX编写Hello, world!

<script>?标签内使用 JSX，方法是在为其添加?type="text/babel"?属性。

<script?type="text/babel">

????????ReactDOM.render(

??????????????<h1>Hello,?world!</h1>,

??????????????document.getElementById('root')

???????????);

?</script>

1.2.3?React中使用JSX创建虚拟DOM

注意：如果在容器渲染多次标签，下一次的标签会替换上一个渲染的标签，这里并不是追加。

  <script type="text/babel">
    //此处一定要写babel
    //1.创建虚拟DOM
    const VDOM= <h1>React 你好</h1>     //此处不要写引号
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById("app"))
  </script>

1.2.4?React中使用js创建虚拟DOM

 <script type="text/javascript">
    //创建单元素
    const VDOM = React.createElement('h1', { id: 'title' }, 'HelloReact');
    //渲染单元素
    ReactDOM.render(VDOM, document.getElementById('app'));
    //创建嵌套元素
    const muchVDOM = React.createElement('h1', { id: 'parent' }, React.createElement('i', {}, 'js创建虚拟DOM'))
    //渲染嵌套元素
    ReactDOM.render(muchVDOM, document.getElementById('app2'));
  </script>

总结：JSX就是js创建虚拟DOM的语法糖。

1.2.5?虚拟DOM和真实DOM

关于虚拟DOM:

????????1.本质是Object类型的对象

????????2.虚拟DOM比较"轻",真实DOM比较"重",属性繁多,因为虚拟DOM是React内部在用,无需真实? ? ? ? ? ? DOM上那么多属性

????????3.虚拟DOM最终会被React转换为真实DOM,呈现在页面上

<script type="text/babel">
    const VDOM = <h1 className='hello'>React 你好</h1>
    console.log(VDOM);                   //{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…},?…}
    ReactDOM.render(VDOM, document.getElementById("app"))
    console.log(typeof VDOM);            //object
    console.log(VDOM instanceof Object); //true
  </script>