学习React 的第二天

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情”

1.代码学习

1. JavaScript 的语法扩展 JSX

   function App() {
       return <h1>学习React第一天💗</h1>
   }
   

   1. 上面的代码乍一看比较诡异，在JS中嵌入了HTML代码，这是一种React对JS的语法拓展也叫JSX
   2. 允许HTML标签和JS语法混合使用
   3. 优点
      1. 我们不需要分开定义HTML和JS文件
      2. 编写和阅读代码会方便很多
   4. 缺点

2. React组件

   function TitleCom() {
       return <h1>标题</h1>
   }
   
   function App() {
       return <>
           <TitleCom/>
       </>
   }
   

   1. React中的组件都可以被简化成一个函数的定义，这就是所谓的函数式组件
   2. 函数的输出是HTML标签
   3. <></> 代表的是一个空标签和Vue中的Template是一样的，表示一个DOM片段 它可以在一个内存里面创建一个DOM节点 但是并不在DOM模板上渲染，内存负载低，从而提升性能！
   4. 这只是一个简单的静态组件。

3. 动态组件（根据数据生成前端界面）

   1. 通常来说数据根据后端接口来获得，目前就先定义一个List 来模拟获得后的数据

          const fetchUsers = [
              {id: 1, name: "😩"},
              {id: 2, name: "😊"},
              {id: 3, name: "😭"},
          ]
      

   2. 根据数据渲染组件

          function UserCom() {
              return <ul>
                  {fetchUsers.map(item =>
                      <h1 key={item.id}>{item.name}</h1>
                  )}
              </ul>
          }
      

   3. 组件引入App方法中，查看界面
      
   4. 这里我们就把JS表达式嵌入在HTML代码中，只需要写在花括号中
   5. 这里我们也可以使用条件判断，推荐使用三目运算法

      function UserCom() {
          return <ul>
              {fetchUsers.map(item =>
                  item.id > 1 ? <h1 key={item.id}>{item.name}</h1> : null
              )}
          </ul>
      }
      

4. 组件传数据

   1. 常规父传子 Props

      interface titleProps {
          title: string
          subTitle?: string
          list?: string[]
      }
      
      function TitleCom(props: titleProps) {
          return <>
              <h1>{props.title}</h1>
              <h4>{props?.subTitle}</h4>
              {props?.list?.length ? <ul>
                  {props.list.map(item => <h1>{item}</h1>)}
              </ul> : null}
      
          </>
      }
      
      
      function App() {
          const list = ['🔎', '❤️']
          return <>
              <TitleCom title="标题组件" list={list}/>
          </>
      }
      

      1. 上面代码中在组件TitleCom 创建一个参数 props: titleProps 这是使用的ts的类型，定义需要接受接收的数据，数据是否必传和数据类型。
      2. 在父组件中使用TitleCom组件时就需要把titleProps中定义的数据传递过去，title="标题组件" 为传递的string类型数据，可以省略花括号，但其它类型则必须使用花括号 list={list}
      3. Props 也叫属性，属性一定是从上层元素中传递下来
      4. 属性是只读的，我们不能在子组件中修改他们
      5. 这就叫单向数据流模式

   2. 子组件向父组件传递数据 事件传递

      function TitleCom(props: titleProps) {
          const msg = "子组件"
          return <>
              <button onClick={() => props.msg(msg)}>{props.title}</button>
          </>
      }
      
      
      function App() {
      
          function msg(val: string) {
              alert(val)
          }
      
          return <>
              <TitleCom title="标题组件" msg={msg}/>
          </>
      }
      

      1. 子组件通过Props定一个Function类型的属性，触发回调传递数据，最终父组件就可以拿到子组件传递过来的数据了。

2. 总结

1. React的JSX语法，TS的话需要创建.tsx的文件
2. 静态组件的创建
3. 动态组件的创建
4. 组件的渲染条件
5. 组件的数据传递
   1. 子传父
   2. 父传子
   3. 夸组件传递数据 下一章学习
6. 下一次学习React 常用的Hook
   1. useState
   2. useEffect
   3. useRef
   4. useContext