react

本文详细介绍了React的基础知识,包括React库的用途、特点,如声明式编程、高效的DOM操作和组件化。讲解了如何使用npx创建React项目,启动命令以及jsx的使用,包括属性写法、循环渲染和样式设置。此外,还深入探讨了React组件的创建,包括函数组件和类组件,以及组件间的数据传递和事件处理。最后,讨论了组件状态管理和计数器组件的实现,展示了React如何处理内部数据变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.什么是react
1.1 react 介绍
	1.用于构建用户界面的JavaScript库,

	2.主要构建UI,很多人认为 React 是 MVC 中的 V(视图)

	3.拥有较高的性能,代码逻辑简单
1.2 react的特点
1.声明式:采用声明范式,描述应用

2.高效:对DOM进行模拟,最大程度减少与DOM的交互

3.灵活:可以和很多框架配合

4.组件:构建组件,可重复使用
2.react脚手架
npx create-react-app 项目名
2.1 npx的作用:
1.默认情况下,首先检查路径中是否存在要执行的包(即在项目中);
2.如果存在,它将执行;
3.若不存在,意味着尚未安装该软件包,npx将安装其最新版本,然后执行它;
启动命令
npm run start

导入REACT和REACT-DOM两个包

import react from 'react'
import ReactDom from 'react-dom'

创建元素

const p=react.createElement('p',null,'内容')

在页面中显示

reactDom.render(p,document.querySelector('#root'))
3.jsx使用
3.1 什么是jsx
jsx是一种JavaScript的语法扩展,运用在react架构中,在JavaScript内部实现,元素是构成react应用的最小单位,jsx就是声明react当中的元素,react使用jsx描述用户界面

简单 用法:

let ul =
  <ul>
    <li>第一个li</li>
    <li>第二个li</li>
    <li>第三个li</li>
  </ul>

ReactDom.render(ul, document.querySelector('#root'))

脚手架创建的项目中可以使用jsx

3.2 jsx属性写法
1.元素属性名必须使用驼峰命名法
2.特殊属性名:class>className ,for>htmlFor

在src中创建一个css文件夹,在写css

在index.js中使用import引入css文件

在行内写样式用{{}}

    <li style={{'color':'blue'}}>第一个li</li>
3.3 循环渲染
const dataList = [
  { id: 1, title: '循环1' },
  { id: 2, title: '循环2' },
  { id: 3, title: '循环3' },
]
let ul = (<ul className='list'>
  {dataList.map(item => <li key={item.id}>{item.title}</li>)}
</ul>
reactDom.render(ul,document.querySelector('#root'))
)
3.5 样式
<li key={item.id} style={'color':'red','backgroundColor':'blue'}>{item.title}</li>)}
3.4 总结
1.jsx是react的核心

2.jsx是在js代码中写html结构,是react声明式的体现

3.使用className给jsx添加样式
4.react组件
4.1 函数组件
function Hello () {
  return (
    <p>这是组件</p>
  )
}
ReactDom.render(<Hello />, document.querySelector('#root'))

函数组件用<>包裹

4.2 类组件
class App extends Component {
  render () {
    return (
      <h1>hello word</h1>
    )
  }
}
ReactDom.render(<App />, document.querySelector('#root'))

注意:

类名称必须大写字母开头

类组件应该继承react.Component父类,从而可以使用父类提供的方法或者属性

类组件必须提供render

render必须有返回值
4.3 单文件组件

1.新建组件页面,把写好的组件放进来

2.export 导出

3.import 引入

4.4 react 组件传值

子页面

 <h1>{this.props.title}</h1>

父页面

<App title="props 的值" />
4.5 react事件
class App extends Component {
  render () {
    console.log(this.props)
    return (
      <h1 onClick={this.changeColor}>{this.props.title}</h1>
    )
  }
  changeColor (e) {
    console.log('点击')
  }
}
4.6 组件状态

类组件是有状态组件,函数组件是无状态组件

  • state是数据,是组件内部私有数据,只能在组件内部使用
  • state的值是对象,表示一个组件中可以有多个数据
  • 通过this.state获取数据
  state = {
    username: 'onlifes'
  }
 <h1>{this.state.username}</h1>
改变状态
  changeColor = () => {
    this.setState({
      username: '改过的username'
    })
  }
4.6.1 计数器组件
import React, { Component } from 'react'
class Compont extends Component {
  state = {
    count: 0
  }
  render () {
    return (
      <div>
        <p>计数器:{this.state.count}</p>
        <button onClick={this.countUP}>+1</button>
        <button onClick={this.countDown}>-1</button>
      </div>
    )
  }
  countUP = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  countDown = () => {
    this.setState({
      count: this.state.count - 1
    })
  }
}
export default Compont
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值