首页 > 其他分享 >React学习一:环境搭建、JSX基础、事件绑定、组件使用、样式控制

React学习一:环境搭建、JSX基础、事件绑定、组件使用、样式控制

时间:2023-10-28 22:45:37浏览次数:27  
标签:function return name App 绑定 React 组件 const JSX

一、概念

React由Meta公司研发,是一个用于构建Web和原生交互界面的库。

react中文文档地址:https://zh-hans.react.dev/learn

React的优势

相较传统基于DOM开发的优势:组件化的开发方式;不错的性能

相较于其他前端框架的优势:丰富的生态;跨平台支持

二、环境搭建

首先和vue项目一样,项目创建工具和包管理工具都是基于nodejs,需要配置好nodejs。react项目创建工具是create-react-app,创建项目的命令如下

npx create-react-app 项目名

创建过程比较慢,多等会。创建好后看一下项目结构,可以看出和vue项目的层级结构很像,有存放依赖的目录node_models,有public和src等。重点看src目录下面的App.js和index.js两个文件,index.js是整个项目的入口,里面导入了React、ReactDOM这两个核心包,还导入了App.js根组件。然后找到public目录下面index.html中的root节点,最后将根组件挂载到root节点上。

三、JSX

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

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

优势:1. HTML的声明式模版写法(响应式数据)2. JS的可编程能力

识别js表达式(注意:一定是表达式,是一个有值的式子),react就是使用大括号来拿值并显示,值可以是表达式,可以是简单的常量,也可以是对象数组等。如果是数组和对象,用起来感觉和...展开运算符很想,去掉最外面的一层括号。

1.使用引号传递字符串
2.使用JavaScript变量
3.函数调用和方法调用
4.使用JavaScript对象

const count = 100
function getName(){
  return 'along'
}
function App() {
  return (
    <div className="App">
      {'this is App'}<br/>
      {count}<br/>
      {getName()}<br/>
      <div style={{color:'red'}}>this is div</div><br/>
    </div>
  )
}
View Code

列表渲染:使用map遍历渲染,每个li标签需要加上一个唯一的key(字符串或number),key在react框架内部使用,提升更新性能。

const list = [
  {id:1000,name:"long0"},
  {id:1001,name:"long1"},
  {id:1002,name:"long2"},
]
function App() {
  return (
    <div className="App">
      <ul>
        {list.map(item=><li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}
View Code

简单条件渲染

const isLogin = true
function App() {
  return (
    <div className="App">
      {isLogin && <span>this is span</span>}<br/>
      {isLogin ? <span>longyi</span> : <span>longer</span>}<br/>
    </div>
  )
}
View Code

复杂条件渲染

const articleType = 1
function getArticleTim(){
  if(articleType === 1){
    return <div>我是单图模式</div>
  }else if(articleType === 2){
    return <div>我是双图模式</div>
  }else{
    return <div>我是多图模式</div>
  }
}
function App() {
  return (
    <div className="App">
      {getArticleTim()}
    </div>
  )
}
View Code

四、事件绑定

语法: on+事件名称= {事件处理程序},整体上遵循驼峰命名法

如果不传参数或只传事件对象,那么事件处理程序里面直接写函数名就可以了,只传事件对象要在函数里面加形参e。

传递自定义参数
语法:事件绑定的位置改造成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参。注意:不能直接写函数调用,这里事件绑定需要一个函数引用

function App() {
  const handleClick = (name,e) => {
    console.log(name,e)
  }
  return (
    <div className="App">
      <div>
        <button onClick={(e)=>handleClick('along',e)}>click me</button>
      </div>
    </div>
  )
}
View Code

五、组件

概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次

在React中,一个组件就是首字母大写的函数,内部存放了组件的逻辑和视图U,渲染组件只需要把组件当成标签书写即可

const Button = () => {
  return <div>click me</div>
}
function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  )
View Code

六、useState

数据驱动视图,也就是vue里面的响应式数据。和vue实现的方式还是有区别的,vue中只需要用ref或reactive声明一个变量就可以实现响应式了,值改变,页面中的值也变。react中则不同,变量的值不能直接修改,直接修改视图中的值不变,必须使用set函数来修改才行。

1. useState是一个函数,返回值是一个数组
2.数组中的第一个参数是状态变量,第二个参数是set函数用来修改状态变量

状态不可变
在React中,状态被认为是只读的,我们应该始终替换它而不是修改它,直接修改状态不能引发视图更新

修改对象状态
规则:对于对象类型的状态变量,应该始终传给set方法-一个全新的对象来进行修改

import {useState} from 'react'
function App() {
  const [num,setNum] =  useState(0)
  const handleButton = () => {
    setNum(num+1)
  }
  const [form,setForm] = useState({name:'along'})
  const handleForm = () => {
    setForm({...form,name:'jack'})
  }
  return (
    <div className="App">
      <button onClick={handleButton}>{num}</button><br/>
      <button onClick={handleForm}>{form.name}</button><br/>
    </div>
  )
}
View Code

七、基础样式控制

1、行内样式(不推荐)

2、class类名控制

import './index.css'
function App() {
  return (
    <div className="App">
      <span className='foo'>this is class fool</span>
    </div>
  )
}
View Code

 

标签:function,return,name,App,绑定,React,组件,const,JSX
From: https://www.cnblogs.com/panglinglong/p/17794732.html

相关文章

  • #yyds干货盘点#深度讲解React Props
    一、props的介绍当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。函数声明的组件,会接受一个props形参,获取属性传递的参数functionComponentA(props){return<div>我是组件B:{props.value}</div>}如果函数组件需要prop......
  • React Router的使用方法和功能
    ReactRouter是一个用于处理路由的库,为React应用程序提供了路由管理功能,使得构建单页面应用(SPA)的导航变得更加简单和灵活。下面是ReactRouter的一些常见使用方法和功能:安装ReactRouter:使用npm或yarn安装ReactRouter。在项目根目录下运行以下命令:npminstallreact-router-dom或......
  • wpf Interaction Triggers 绑定任意方法、任意Command
     framework版本引入命名空间通过在代码中引入System.Windows.Interactivity.dll,引入了这个dll后我们就能够使用这个里面的方法来将事件映射到ViewModel层了,我们来看看具体的使用步骤,第一步就是引入命名控件xmlns:i="clr-namespace:System.Windows.Interactivity;assembl......
  • react
    使用jsx 使用js    ......
  • Vue绑定Style和Class写法
    vue2写法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>......
  • 给react native 添加transform translateY动画报错:Transform with key of "translateY
    初学reactnative,想实现一个相机扫描功能时,报错,报错描述如标题这是我的主要逻辑代码constfadeAnim=useRef(newAnimated.Value(0)).current;constmove=()=>{fadeAnim.setValue(0);Animated.timing(fadeAnim,{toValue:200,duration:20......
  • 2023-10-24 react+ts 遍历双重对象嵌套数组
    useEffect(()=>{if(value){constarr=value;for(constkinarr){console.log(k,arr[k]);arr[k].key=arr[k].id;arr[k].title=arr[k].name;for(constk2inarr[k].children){arr[k2]......
  • react native的新架构
    Startingfromversion0.68,ReactNativeprovidestheNewArchitecture,whichoffersdevelopersnewcapabilitiesforbuildinghighlyperformantandresponsiveapps. (https://reactnative.dev/docs/the-new-architecture/landing-page) PillarsoftheNewArch......
  • 2023-10-24 Too many re-renders. React limits the number of renders to prevent an
    React报错:Toomanyre-renders.Reactlimitsthenumberofrenderstopreventaninfiniteloop. 重新渲染过多。React限制渲染次数,以防止出现无限循环。解决方案:查看你最近写的代码,比如我写了一个函数组件,我在函数组件里面写了直接执行的任务,这将导致状态变化,react会重新渲......
  • 关于 React 性能优化和数栈产品中的实践
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:的卢引入在日常开发过程中,我们会使用很多性能优化的API,比如像使用memo、useMemo优化组件或者值,再比如使用shouldComponentUpdate减......