Reactlearning.md

1.Reactの紹介

Reactは、ユーザーインターフェイスの構築に使用されるJavaScriptライブラリです。Facebookの内部プロジェクトとデザインのアイデアは非常にユニークです。完全なMVCではありません。

1.ReactとVueの比較

コンポーネントの側面
モジュール化：コード分析から、いくつかの再利用可能なコードは単一のモジュールに分離されます
コンポーネント化
- vueはどのようにコンポーネント化を実現しますか
  - vueファイル（テンプレート、スクリプト、スタイル）
- Reactにはvueのようなコンポーネントモジュールファイルはありません。コンポーネント化された開発でもあり、すべてがjsに実装されています。

2.Reactの利点

ユニークなデザインアイデア、すべてがjsに基づいており、コンポーネント化された開発が実現されます
仮想dom
JSX構文（js + xml）
クロスブラウザの互換性
一方向のデータフロー

Reactの欠点：完全なMVCフレームワークではなく、複雑な大規模プロジェクトには適していません

3.仮想dom

仮想dom ---- javascriptオブジェクト（仮想DOM）
データが変更されると、ReactはDOMツリー全体を再構築し、diffアルゴリズムを使用して現在のDOMを比較します
ツリーと最後のdomツリーは、dom構造の変更の一部を取得し、変更された部分に従って実際のdom操作を実行します。

4.JSX構文

引用符なしでJavaScriptコードに直接htmlコードを記述します

   jsx语法中，变量/表达式 要写在 {
    
    } 中

   jsx语法中  遇到  <> 解析为html标签，遇到 {
    
    } 解析为js代码

   {
    
    } 中 可以使用变量，表达式，数组，三目运算（但是不能是一个对象，if语句，for循环）

5.Reactの使用

   在这里插入代码片<!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
    
      <title>Document</title>
      <!-- 2：引入模块 -->
      <!-- react核心模块 创建组件 虚拟dom元素   生命周期 -->
      <script src="https://unpkg.com/react@16/umd/react.development.js"     crossorigin>   </script>
      <!-- 把创建好的组件 和虚拟dom放到真实的dom上 -->
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   </head>
   <body>
      <!-- 步骤 1： 添加一个 DOM 容器到 HTML -->
      <div id="app"></div>
   </body>

   <script>
   // console.log(ReactDOM) 
   // console.log(document.getElementById('app'))
   /*
    1:创建虚拟dom
      参数1：元素的名称   字符串
      参数2：对象或null 当前dom元素的属性
      参数3：子节点 其他的虚拟dom  文本
   */
     const a=React.createElement('a',{
    
    href:'#'},'百度链接')
     const div=React.createElement('div',null,a)

     console.log(a)
    /*把虚拟那dom渲染到真实的dom上
    参数1：要渲染虚拟dom元素
    参数2：指定页面上的一个容器

   */
    ReactDOM.render(div,document.getElementById('app'))
   // ReactDOM.render(div,'#app')
   // Target container is not a DOM element.  目标容器不是一个dom元素

   </script>
   </html>

6、JSXの使用

1.紹介する

   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

2.jsxを使用します

   <script type="text/babel">
   //jsx语法使用
   </script>
   只有script的type的属性值为type='text/babel' 才能识别jsx语法

3.コード

   在这里插入代码片<!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
    
     <title>Document</title>
   
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <!-- 1:要使用jsx语法  引入babel.js -->
     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <style>
     .box{
    
    
       width:200px;
       height:200px;
       background-color: red;
     }
   </style>
   </head>
   <body>
  
     <div id="app"></div>
   </body>
     <!-- 在script便签中使用jsx语法 -->
     <script type="text/babel">

     // 1：创建虚拟dom
     //  let div=<div><a href='#'>百度连接</a></div>
     // //  console.log(div)
     // ReactDOM.render(div,document.getElementById('app'))

    //  优雅的写法

    ReactDOM.render((
      <div className="box">
      <a href='#'>百度连接</a>
    </div>
    ),document.getElementById('app'))


    //** Adjacent JSX elements must be wrapped in an enclosing tag (14:4)
    // 只能有一个根节点

    // Invalid DOM property `class`. Did you mean `className`?
    // in div

    // React中使用className定义类名
   </script>
   </html>

1.Reactの紹介

1.ReactとVueの比較

2.Reactの利点

3.仮想dom

4.JSX構文

5.Reactの使用

6、JSXの使用

おすすめ