React全家桶 - 【React】 - 【1】JSX基础语法、列表渲染、条件渲染、事件绑定及传参

前言

什么是 JSX？

• JSX 是 JavaScript 和 XML(HTML) 的缩写，表示在 JS 代码中编写 HTML 结构 ，它是React中编写UI模板的方式；
• 优势 ：
  • HTML的声明式写法；
  • JS的可编程能力；

本质

• JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行；
• 
• 🎯 解析工具 - babel；
  • 铁子们可以自行去该网站写一些JSX，看解析出来是什么样;
  • 点击导航栏的 Try it Out ，进去之后需要将左侧的 recat 勾选上；
  • 

一、JSX中使用JS表达式

• 在JSX中可以通过 大括号语法 {} 识别 JavaScript 中的 表达式 ;
  • 变量;
  • 函数调用;
  • 方法调用等等；
• 四个高频场景：
  • 使用引号传递字符串；
  • 使用JS变量；
  • 函数调用和方法调用；
  • 使用JS对象；

// 项目的根组件
const message = 'React 学习';
const obj = {
  name: '禁止摆烂'
};
const getName = () => obj.name + '_才浅';
function App() {
  return (
    <div>
      <h1>this is title</h1>
      {/* 使用引号传递字符串 */}
      {'好好学习 天天向上'}
      
      {/* 使用JS变量 */}
      {message}
      
      {/* 函数调用和方法调用 */}
      {getName()}
      {new Date().getTime()}
      
      {/* 使用JS对象 */}
      {/* 外层是识别表达式的语法，内层是识别的对象结构 */}
      <div style={{ color: 'red' }}>this is div</div>
    </div>
  );
}

export default App;

• ❗ 注意 ：
  • if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中；

二、列表渲染

2.1 基本渲染

• 语法 ：
  • 在JSX中可以使用原生JS中的 map 方法遍历渲染列表；

• ❗ 注意 ：
  • 需要添加上一个独一无二的key；
  • key：string 或者 number；
  • 作用：React内部使用，提升更新性能的；

• 代码展示：

  const list = [
    { id: '1000', name: 'jQuery', flag: false },
    { id: '1001', name: 'Vue', flag: true },
    { id: '1002', name: 'React', flag: true },
    { id: '1003', name: 'Angular', flag: false }
  ];
  function App() {
    return (
      <ul>
        {/* map 循环哪个结构 return 哪个结构 */}
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
  
  export default App;

  

2.2 基础条件渲染

• 在 React 中，可以通过 逻辑运算符(&&)、三元表达式(?:) 实现基础的条件渲染；

• 逻辑运算符(&&) ：

  • 控制单个标签的显示隐藏；

• 三元表达式(?:) ：

  • 两个标签的切换；

• 代码展示：

  const flag = true;
  function App() {
      return (
          <div>
              {/* 逻辑与 */}
              {flag && <span> 开始学习 React </span>}
              
              <br />
              
              {/* 三元运算 */}
              {flag ? <span> 看会小姐姐 </span> : <span> 玩会游戏 </span>}
          </div>
      );
  };

  

2.3 复杂条件渲染

• 在实际的开发中，遇到的复杂条件渲染肯定是最多的，就比如下面这张图：
  • 
  • 这个怎么实现呢？
• 需求：列表中要根据文章的状态适配三种情况：无图、单图、三图；
• 解决方案：自定义函数 + if判断语句；

// 文章列表
const articleList = [
  { id: '1000', title: 'React 学习笔记', type: 0, src: [] },
  { id: '1001', title: 'Vue 学习笔记', type: 1, src: [1] },
  { id: '1002', title: 'JS 学习笔记', type: 3, src: [1, 2, 3] }
];

// 定义核心函数 - 根据文章类型返回不同的JSX模板
const getArticleTemplate = (item) => {
  if (item.type === 0) {
    return (
      <div key={item.id} style={{ border: '2px solid red' }}>
        <p>文章内容</p>
      </div>
    );
  } else if (item.type === 1) {
    return (
      <div key={item.id} style={{ display: 'flex', border: '4px solid green' }}>
        <div style={{ flex: 1 }}>
          <p>文章内容</p>
        </div>
        <div style={{ flex: 1 }}>
          <p>单图模式</p>
        </div>
      </div>
    );
  } else {
    return (
      <div key={item.id} style={{ border: '6px solid blue' }}>
        <p>文章内容</p>
        <ul style={{ display: 'flex', justifyContent: 'space-between' }}>
          {item.src.map((item) => (
            <li key={item}>{`第${item}张图`}</li>
          ))}
        </ul>
      </div>
    );
  }
};

function App() {
  return articleList.map((item) => getArticleTemplate(item));
}

export default App;

三、事件绑定

3.1 事件绑定基本语法

• 语法 ：

  • on + 事件名称 = {事件处理函数}；
  • 整体上遵循 驼峰命名法；

• 代码展示：

  function App() {
      const onClick = () => {
          console.log(13);
      };
  
      return <button onClick={onClick}>React 中的事件绑定</button>;
  }
  
  export default App;

3.2 传递自定义参数

• 语法 ：

  <元素 on事件名称={() => 时间处理函数名(实参1, 实参2, 实参n)}/>

  • 事件绑定的位置改造成 箭头函数 的写法，在执行 实际处理业务函数的时候传递实参；

• ❗ 注意 ：

  • 如果要传递自定义参数，一定是要改写成箭头函数的形式；
  • 不能直接写成函数调用，这里事件绑定需要一个 函数引用；

• 代码展示：

  function App() {
      const onClick = (num) => {
          console.log(num, 13);
      };
      
      return <button onClick={() => onClick(10)}>React 中的事件绑定</button>;
  }
  
  export default App;

3.3 使用事件对象参数

3.3.1 单纯使用 事件对象

• 语法 ：

  • 在事件回调函数中设置形参 e；

• 代码展示：

  function App() {
      const onClick = (e) => {
          console.log(e);
      };
  
      return <button onClick={onClick}>React 中的事件绑定</button>;
  }
  
  export default App;

3.3.2 同时使用 事件对象 和 自定义参数

• 语法 ：

  • 在事件绑定的位置传递 事件实参e 和 自定义参数，在事件处理函数中声明形参，❗ 注意顺序对应；

• 代码展示：

  function App() {
      const onClick = (num, e) => {
          console.log(num, e, 13);
      };
  
      return <button onClick={(e) => onClick(10, e)}>React 中的事件绑定</button>;
  }
  
  export default App;