react介绍

开发环境搭建

create-react-app是一个快速 创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用执行命令:

npx create-react-app react-basic

1.npx Node.js工具命令，查找并执行后续的包命令

2.create-react-app 核心包(固定写法)，用于创建React项目

3.react-basic React项目的名称(可以自定义)

上面的执行如果报错的话，使用下面的命令执行

yarn create react-app react-basic

创建React项目的更多方式

什么是JSX

概念:JSX是|avaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

const message ='this is message
function App (){
return (
	<div>
		<h1>this is title</h1>
		{message}
	</div>
)

优势:

1. HTML的声明式模版写法
2. JS的可编程能力

JSX的本质

JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行

<div>
	this is div
</div>

转化成

import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("div", {
  children: "this is div"
});

查看的网站

JSX中使用JS表达式

在JSX中可以通过 大括号语法( 识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

1. 使用引号传递字符串

2. 使用JavaScript变量

3. 函数调用和方法调用

4. 使用JavaScript对象

function App() {
    return (
        <div className="App">
            this is app
            {/*使用引号传递字符串*/}
            {'this is message'}
            {/*识别js变量*/}
            {count}
            {/*函数调用*/}
            {getName()}
            {/*方法调用*/}
            {new Date().getDate()}
            {/*使用js对象   style中外面的大括号表示jsx语法 里面的表示要识别的对象结构  */}
            <div style={{color: "red"}}>this is div</div>
        </div>
    );
}

循环

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

  let list = [
      {id:1001,name:'jack'},
      {id:1002,name:'tom'},
      {id:1003,name:'snail'}
  ]
  
  function App() {
      return (
          <div className="App">
              {/* 渲染列表*/}
              {/* map循环那个结构 return结构 */}
              {/* 注意事项：加上一个独一无二的key  字符串或者number 通常使用id*/}
              {/* key的作用：React框架内部使用 提升更新性能 */}
              <ul>
                  {list.map(item=><li key={item.id}>{item.name}</li>)}
              </ul>
          </div>
      );
  }
  

条件渲染

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

  let isLogin = true
  
  function App() {
      return (
          <div className="App">
              {/* 逻辑与 &&  */}
              {isLogin && <span>this is span</span>}
              {/* 三元运算 */}
              {isLogin ? <span>snail</span> : <span>loading</span>}
          </div>
      );
  }
  

• 多条件判断

  let articleType = 3;
  
  function getArticleTem(){
      if(articleType === 0){
          return <div>我是无图文章</div>
      }else if(articleType === 1){
          return <div>我是单图模式</div>
      }else {
          return <div>我是三图模式</div>
      }
  }
  
  
  function App() {
      return (
          <div className="App">
              {/* 调用函数渲染不同的模板 */}
              {getArticleTem()}
          </div>
      );
  }
  

事件绑定

• 基础绑定

  function App() {
  
      const handlerClick = () => {
          console.log('button被点击了');
      }
  
      return (
          <div className="App">
              <button onClick={handlerClick}>click me </button>
          </div>
      );
  }
  

• 使用事件对象参数

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

    function App() {
    
        const handlerClick = (e) => {
            console.log('button被点击了', e);
        }
    
        return (
            <div className="App">
                <button onClick={handlerClick}>click me </button>
            </div>
        );
    }
    

• 传递自定义参数

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

  • 注意:不能直接写函数调用，这里事件绑定需要一个函数引用

    function App() {
    
        const handlerClick = (name) => {
            console.log('button被点击了', name);
        }
    
        return (
            <div className="App">
                <button onClick={()=>handlerClick('snail')}>click me </button> 
            </div>
        );
    }
    

  • 同时传递事件对象和自定义参数

    function App() {
    
        const handlerClick = (name,e) => {
            console.log('button被点击了', name,e);
        }
    
        return (
            <div className="App">
                <button onClick={(e)=>handlerClick('snail',e)}>click me </button>
            </div>
        );
    }
    

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