React笔记(一)

前言

eg：代表代码对照若文章有误，欢迎读者留言反馈

JSX语法

html文件中引入

1
2
3

<!-- vue就vue这个核心包，react有两个，react react-dom -->
<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	<div id="app"></div>

ReactDOM.render

react代码
ReactDOM.render 这个是react-dom提供的方法，render把模板变成虚拟dom

参数1 类似于document.createElement(标签名，属性值，内容)

参数2 指定挂载点把节点挂载到当前div#app下面

eg1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue就vue这个核心包，react有两个，react react-dom -->
    <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>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <script>
        // react代码
        // ReactDOM.render 这个是react-dom提供的方法，render把模板变成虚拟dom
        // 参数1  类似于document.createElement(标签名，属性值，内容)
        // 参数2 指定挂载点 把节点挂载到当前div#app下面
         ReactDOM.render(
             React.createElement('div',{},'我的第一个页面'),
             document.querySelector('#app')
            )
    </script>
</body>
</html>

引入babel，jsx模板语法

在script标签内指定type类型type="text/babel"

eg2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue就vue这个核心包，react有两个，react react-dom -->
    <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>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <script type="text/babel">
        // react代码 jsx jsx是语法标准，是react的模板语法，既可以写html 又可以写react语法
        // vue 中template是vue的模板，既可以写vue语法，有可以写html。
        // 下面案例就是所谓的jsx语法，注意：jsx必须有个跟标签。
        var vdom = <div>
               <h3>hello wrod</h3>
               <div>我是内容部分</div>
            </div>
         ReactDOM.render(
             vdom,
             document.querySelector('#app')
            )
    </script>
</body>
</html>

React插值表达式

语法：{}
注释：jsx中添加注释，需要包裹{}，同时只能使用/ 注释内容 /，而不是双斜杠//
类似vue，{}里面支持放数据、变量、表达式（&& || ！等）、函数调用【注意最终的落脚点都是一个具体的值】
花括号里面的数组默认会被遍历渲染【jsx中如果是一维数组，直接写上就可以遍历渲染了，但是会报警告，得加上key】

{ /*  注意：jsx中添加注释，需要包裹{} */ }
{/* 默认对数组解析遍历 */}
{
    [ <h2 key={1}>aa</h2>, <h2 key={2}>bb</h2> ]
}

{/* 解析html */}
{
    <h1>hello world</h1>
}

eg3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue就vue这个核心包，react有两个，react react-dom -->
    <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>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <script type="text/babel">
        /*
           react 插值表达式
             + 类似vue，变量，表达式（链接且，链接或，三元），函数调用
             + 语法： {} 单括号中可以放表达式
        */
        var w = 'word'
        // 解析普通变量
        // var vdom = <div>hello { w }</div>
        // 三元表达式
        var b = false
        var vdom = <div>hello { b ? 'word':'hello' }</div>
        ReactDOM.render(
            vdom,
            document.querySelector('#app')
        )
    </script>
</body>
</html>

动态属性

回顾vue：v-bind:hello=”a” 变量a:’hello world’
React语法：hello={a} 变量a:’hello world’
class需要注意，React中没有class这个属性，与class类同名，用className替代[只要在jsx里面写只能写className]

eg4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue就vue这个核心包，react有两个，react react-dom -->
    <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>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
   <style>
    .hello{
        color:red;
    }
   </style>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <script type="text/babel">
        /*
           动态属性
             + 回顾vue，v-bind:hello="a"     变量a:'hello'
             + jsx语法： hello={ a }         变量a:'hello'
        */
        var a = 'hello'
        // 动态属性写法 就是单大括号  跟插值一模一样
        // var vdom = <div hello={ a }>hello </div>
        // 样式 动态class  react中没有class这个属性，用className取代[只要在jsx里面写只能写className]
        var vdom = <div className={ hello }>hello </div>
         ReactDOM.render(
             vdom,
             document.querySelector('#app')
            )
    </script>
</body>
</html>

React样式写法、插入html

class绑定单个属性值
- className={ title } 变量title: ‘title’
dangerouslySetInnerHTML 解析并插入标签，类似innerHTML、vue的v-html
插值中，加引号是字符串，不加是引号就是变量

[补充：有些标签自带的属性可以直接写，如表格自带的属性有的需要大括号有的需要引号，注意一下就行]

class不做动态绑定处理[下面这个title就是普通类名]
var vdom = <div className="title">hello world</div>
class绑定单个值
var title = 'title'
var vdom = <div className={ title }>hello world</div>
class绑定多个值
使用变量var styles = ['title', 'bg']
var vdom = <div className={ styles.join(' ') }>hello world</div>
不使用变量
var vdom = <div className={ 'title bg' }>hello world</div>
style行内样式
直接写在{}
var fon = '12px'
var vdom = <div style={{color:'red',fontSize:fon}}>hello</div>
使用变量var s = {color:'red',fontSize:'12px'}
var vdom = <div style={ s }>hello</div>

dangerouslySetInnerHTML react用来解析字符串，并识别标签 v-html

var vdom = <div>hello，<p dangerouslySetInnerHTML={{__html:'<a href="http:www.baidu.com">百度一下</a>'}}></p> </div>
    ReactDOM.render(
        vdom,
            document.querySelector('#app')
    )

eg5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue就vue这个核心包，react有两个，react react-dom -->
    <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>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
   <style>
    .title{
        color:red;
    }
    .bg{
        font-size: 12px;
    }
   </style>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <script type="text/babel">
       /*
          react样式写法
            + class绑定单个属性值
               => className={ title }    变量title:'title'
            + dangerouslySetInnerHTML 解析并插入标签
            + 插值中，加引号是字符串，没加引号的变量。
       */
        // var title = 'title'
        var vdom = <div className='title'>hello</div>
        // 1.class绑定单个值
        // var vdom = <div className={ title }>hello</div>
        // 2.class绑定多个值
        var styles = ['title','bg']
        //   var vdom = <div className={ styles.join(' ') }>hello</div>
        //   var vdom = <div className={'title bg'}>hello</div>
        //  3.三元
        var b = false
        // var vdom = <div className={ b ? 'title':'' }>hello</div>
        //  4.style行内样式
        var fon = '12px'
        // var vdom = <div style={{color:'red',fontSize:fon}}>hello</div>
        // var s = {color:'red',fontSize:'12px'}
        // var vdom = <div style={ s }>hello</div>
        // dangerouslySetInnerHTML  react用来解析字符串，并识别标签  v-html
        // 了解下，容易被xss攻击
        // var vdom = <div>hello，<p dangerouslySetInnerHTML={{__html:'<a href="http:www.baidu.com">百度一下</a>'}}></p> </div>
         ReactDOM.render(
             vdom,
             document.querySelector('#app')
            )
    </script>
</body>
</html>

数组遍历

React数组遍历

回顾vue，v-for=”(item, index) in arr” :key=”item.id”

jsx，arr.map((item, index) =>
{ item.name }
)

eg6:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue就vue这个核心包，react有两个，react react-dom -->
    <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>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
   <style>
    .title{
        color:red;
    }
    .bg{
        font-size: 12px;
    }
   </style>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <script type="text/babel">
        /*
           react 数组遍历
             + 回顾vue，v-for="(item,index) in arr" :key="item.id"
             + arr.map((item,index)=>return <li key={item.id}>{ item.name }</li>)
        */
       var arr = ['小明','小红','小黑']
       var vdom = <div>
            <ul>
               {/*  注意：jsx中添加注释，需要包裹{}，数组有多少个元素，我们应该是有多个li标签 */}
               {
                 arr.map((item,index)=>{
                    return <li key={ index }>{ item }</li>
                 })
               }
            </ul>
        </div>
       ReactDOM.render(
             vdom,
             document.querySelector('#app')
            )
    </script>
</body>
</html>

对象遍历

React对象遍历

回顾vue，v-for=”(val,key,index) in obj” :key=”key”

jsx，Object.keys(obj).map((item,index) =>
键名：{ item } ---- 键值：{ obj[item] }
)

把对象的每个键名转为数组，再使用map映射

eg7:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue就vue这个核心包，react有两个，react react-dom -->
    <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>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
   <style>
    .title{
        color:red;
    }
    .bg{
        font-size: 12px;
    }
   </style>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <script type="text/babel">
        /*
           react 对象的遍历
            + 回顾vue，v-for="(val,key,index) in obj"  :key="key"
            + Object.keys(obj).map((item.index)=>{
                return <li key={ item }>属性：{ item }，属性值：{ obj[item] }</li>
            })
        */
       var obj = {
         id:123,
         name:'小明',
         age:22
       }
       var vdom = <div>
            <ul>
               {
                 Object.keys(obj).map((item,index)=>{
                    return <li key={ item }>属性：{ item },属性值：{ obj[item] }</li>
                 })
               }
            </ul>
        </div>
       ReactDOM.render(
             vdom,
             document.querySelector('#app')
            )
    </script>
</body>
</html>