react笔记_04jsx语法学习

知识点复习

[1] 什么叫做js表达式

总结成一句话：能够返回一个值的叫做js表达式
举例说明

• a – 返回变量a的值
• a+b – 返回变量a+b的结果
• fun(1) – 返回函数调用值
• arr.map – 返回映射后的新数组
• function test () – 返回函数本身
• console.log(1) – 就是函数调用，返回值为undefiend

[2]什么不是表达式呢？-控制语句

举例说明

• if流程控制语句
• switch流程控制语句
• for循环语句
• while循环语句

jsx语法

• 1.jsx是js的扩展语法 ,全称为 javascript XML
• 2.jsx语法与js语法的不同之处
  • [1] jsx能够识别虚拟dom, 可以直接创建vdom；
    • 注意：创建虚拟dom时，跟标签有且仅有一个；若是我们不需添加根标签造成dom元素冗余，可以使用空标签或Fragment组件
  • [2] 若是想要在jsx语法中混入 js 表达式时，需要使用{}包裹；
    • 注意： jsx中仅能混入 js表达式，不能混入js语句

      tips: 若是需要使用循环语句可以使用map，若是使用条件控制语句可以使用&&

      • 举例说明：-> 示例1
      • 举例说明：-> 示例2
    • 在渲染过程中 null 、boolean、undefined 虽然都是有效的子代，但它们不会直接被渲染。因此有些组件是在 符合条件 的情况下才渲染 -> 可以结合&& 操作符使用(因为jsx中不能混入if 语句)
      • 举例说明：-> 示例3
      • 举例说明：-> 示例4
  • [3]在标签间添加类名时–>样式的类名需要使用className
    • 注意：使用class样式虽然能够正常显示但是会在控制台报错
    • 原因：class为es6定义类的关键字，jsx为避开使用关键字作为属性因此在其中类名使用className
  • [4]内连样式不能使用字符串而是要使用对象
  • [5]标签必须闭合
• 3.渲染过程：在我们使用jsx在创建虚拟dom
  • 若是标签名小写： react会将标签渲染为html的同名元素； 但是若是html中没有同名标签，虽然能够正常渲染但是会在控制台报错；eg: 则会报错
  • 若是标签名为大写：react就去寻找对应的组件并进行渲染，若组件没有定义，则报错；

示例1

<script type="text/babel">
  class Mycomponent extends React.Component{
    render(){
      // 报错：Warning: Expected `onClick` listener to be a function, instead got a value of `string` type
      // 原因：在jsx中混入js语法时需要使用{}包裹
      return <h1 onClick='test'>测试事件绑定</h1>
    }
    test(){
      console.log(this)
    }
  }
  ReactDOM.render(<Mycomponent />, document.getElementById('test111'))
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

修改后

return <h1 onClick={this.test}>点击</h1>
1

示例2

需求： 将后端返回的数组[‘Angular’, ‘React’, ‘Vue’]渲染在页面上，每个数组元素以li元素进行渲染
实现
不能直接使用for循环-- 原因：jsx中只能混入js表达式

<div id="test">div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js">script>
<script type="text/babel">
    const arr =['Angular', 'React', 'Vue'] 
    const vdom=(
        // 类名使用className
        <div className='main'>
          <div className='title'>前端js框架列表</div>
          <ul>
            {
                // 不能直接使用for循环-- 原因：jsx中只能混入js表达式
                arr.map((item,index)=> <li key={index}>{item}</li>)
            }
          </ul>
        </div>
    )
    ReactDOM.render(vdom,document.getElementById('test'))
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

示例3

<script type="text/babel">
  function Mycomponent(){
    return (
      <div>
        <span>{false}</span>
        <span>{true}</span>
        <span>{null}</span>
        <span>{undefined}</span>
      </div>
    )
  }
  ReactDOM.render(<Mycomponent />,document.getElementById('test'))
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 渲染时只渲染了 4个空的span标签 如下
• 

示例4

  function Mycomponent(){
    let [count , setCount] = React.useState(0)
    return (
      <div>
        <span>{ count > 10 && '他给的太多了'}</span>
        <button onClick={()=>{setCount( count+1 ); console.log(count > 10 && '他给的太多了') }}>点我++</button>
      </div>
    )
  }
  ReactDOM.render(<Mycomponent />,document.getElementById('test'))
1
2
3
4
5
6
7
8
9
10

• count在小于10时，页面不会渲染任何数据(boolean不会被渲染)
• count在大于10时，页面显示 ‘他给的太多了’ 文本