react

最新推荐文章于 2026-01-05 13:21:54 发布

原创最新推荐文章于 2026-01-05 13:21:54 发布 · 363 阅读

CC 4.0 BY-SA版权

文章标签：

一、react入门
1.为什么要学学react
原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
使用JavaScript直接操作DOM，浏览器会进行大量重绘重排
原生JavaScript没有组件化编码方案，代码复用率低

2.React的特点
采用组件化模式，声明式编码，提高开发效率及组件复用率
在React Native中可以使用React语法进行移动端开发
使用虚拟DOM+优秀的diffing算法，尽量减少与真实dom的交互
react高效的原因：
1.使用虚拟DOM不总是直接操作页面真实DOM
2.DOM diffing算法，最小化页面重绘
二、react的基本使用

1.使用jsx创建虚拟DOM

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持reatc操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">/*此处一定要写babel*/
    // 1.创建虚拟DOM
    const VDOM = <h1 id="title">
        <span>Hello react</span>
      </h1>/*此处不要写引号，因为不是字符串*/
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>

2.使用js创建虚拟DOM

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持reatc操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
 
  <script type="text/javascript">
    // 1.创建虚拟DOM
    const VDOM = React.createElement('h1',{id: 'title'},React.createElement('span',{}, 'Hello react js')) /*套娃*/
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>

3.虚拟DOM与真实DOM

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持reatc操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">/*此处一定要写babel*/
    // 1.创建虚拟DOM
    const VDOM = <h1 id="title">
        <span>Hello react</span>
      </h1>/*此处不要写引号，因为不是字符串*/
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
    const TDOM = document.getElementById('test')
    console.log('虚拟dom',VDOM);
    console.log('真实DOM', TDOM);
    debugger
    // console.log(typeof VDOM);
    // console.log(VDOM instanceof Obejct);

    // 关于虚拟DOM：
    /*
    1.本质是Object类型的对象
    2.虚拟DOM比较“轻”，真实DOM比较重，因为虚拟DOM在react内部使用，无需真实dom那么多属性
    3.虚拟DOM最终会被react转化成真实dom,呈现在页面上
    */
  </script>
</body>

4.jsx语法规则：

1.定义虚拟dom时，不能用引号

2.标签中混入js表达式时要用{}

3.样式的类名要用className

4.内联样式必须用style={{key: value}}形式

5.jsx只允许一个根标签

6.标签必须闭合

7.标签首字母

a.若小写字母开头则将该标签转为html同名元素，若html中无该同名标签，则报错

b.若大写字母，react就去渲染对应组件，若组件没有定义，则报错

一定注意区分：js语句和js表达式

1.表达式：一个表达式会产生一个值，可以放在任意一个需要值的地方

例如：a a+b demo(1) arr.map() function test(){} console.log()

2:语句

if(){} for(){} switch(){}

5.函数式组件

// 1.创建函数式组件

function MyComponent() {

console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式

return <h2>我是函数定义的组件，（适用于简单组件）</h2>

}

// 渲染组件到页面

ReactDOM.render(<MyComponent/>, document.getElementById('test'))

/*

执行ReactDom.render后，发生了什么？

1.react解析组件标签，找到MyComponent组件

2.发现组件时使用函数定义的，随后调用函数，将返回的虚拟Dom转为真实dom，呈现到页面

*/