React第三节之JSX用法介绍特点

1、JSX 介绍

JSX 是javascript XML的缩写，表示可以再 js 中书写 html 语法；虽然看起来像是 HTML 但是在React 中使用时 Babel 会将 JSX 转化为 javascript 语法；

2、JSX的语法

a、在 大括号中书写表达式： { 表达式 }； 常用的表达式：字符串、数值、布尔、undefined/null/array/object 1+2 /array.join()/字符串.split(',')/ fun() 注意：是 表达式 而不是语法句：如：let a=1/if(){}/switch(){} 这是语法句

b、列表渲染：使用 数组的map方法

   const MyText = () =>{
       const lists = [1,2,3,4,5,6,7,8,9]
       return (
           <>
               <ul>
                   {
                       lists.map(itm => <li key={itm}>itm</li>)
                   }
               </ul>
           </>
       )
   }

在 React 中列表渲染的 key 是必须的，而且需要保持唯一性，这是 React 性能优化提升的重要依赖；

c、条件渲染： 条件表达式中，可以是DOM 结构、字符串、函数、等 可以使用三元运算、if表达式、与运算符号(&&) 使用 与(&&) 运算符 时候 左侧不能是 数字，因为数字会直接渲染出来，而不是隐式转换为布尔值

const MyText = () => {
   const type = true
   function myBtn() {
       if (type) {
           return <button>保存</button>
       } else {
           return <button>更新</button>
       }
   }
   return (
       <>
           <div>
               {/* { type ? '加油': '躺平'} */}
               { type ? <span>加油</span> : <span>卷出新高度</span> }
               { type && <span>什么时候躺平</span> }
           </div>
       </>
   )
}

d、JSX 中样式 内联样式: 需要多加一层 {}

{
  <div style={{ color: 'blue', fontSize: '18px' }}>
      躺平人生
  </div>
}

样式表: 可以使用 text.module.css 文件 模块样式表，保证页面之间的样式相互之间不影响

const activedClass = {
    font-size: '20px';
    color: '#086823
}
// 样式类名需要使用 className 为了与 css 中的class 区分
{
    <div className={activedClass}>
        躺平人生
    </div>
    // 动态添加样式
    <div className={ true ? 'activedClass' : ''}>
        躺平人生
    </div>

}

e、事件处理

事件名 必须是 驼峰写法，如：鼠标事件，onMouseDown/onMouseUp onMouseEnter/onMouseLeave

const MyApp = () => {
    const handleSubmit = (e, otherParams) => {
        console.log('提交')
    }
    return (
        <>
            {/* // 通用写法 */}
            {/* <button onClick={handleSubmit}> */}
            {/* 若需要传入额外参数，需要使用返回一个函数 */}
            <button onClick={(e) => handleSubmit(e, otherParams)}>
                提交
            </button>
        </>
    )
}

3、特点：

a、方便组件化，HTML标签与js语法(逻辑与视图紧密结合)，可以更方便的理解代码的业务逻辑
b、必须有且只有一个根标签 在 React 中可以使用 <></> 或者 <Fragment></Fragment>
c、所有的标签必须要有闭合标签，不能是如下 <img /> 单闭合标签；
d、学习成本比较高，对于JS HTML CSS 代码分离写法习惯的同学，开始比较难以理解