react的基础

box--小盒

已于 2023-04-03 21:36:25 修改

阅读量94

点赞数

文章标签： react.js Powered by 金山文档

于 2023-02-11 10:05:08 首次发布

本文链接：https://blog.csdn.net/Asher_lm/article/details/128980225

版权

一. React介绍

React是一个由Facebook开源的JavaScript库，用于构建用户界面。React允许开发人员以声明式的方式构建可复用的UI组件，使得对于复杂的Web应用程序，构建和维护用户界面变得更加简单。

React采用组件化的开发模式，将Web页面拆分为多个模块化组件，使得每个组件都可以独立地进行开发、测试和维护。同时，React还采用了虚拟DOM和单项数据流的设计思想，使得React的性能表现更加出色。

二.React的优点

声明式编程：React可以让开发人员以声明式的方式编写UI组件，从而使得界面代码更加可读、可维护，同时也更加容易组件化。

组件化开发：React采用组件化的开发模式，将页面拆分为多个小的、独立的组件，可以大大提高开发效率，并使代码更加易于重用和维护。

虚拟DOM：React使用虚拟DOM来优化页面渲染，可以在最小化DOM操作的同时，有效地减少页面重绘次数，提高性能。

单项数据流：React采用单项数据流的设计思想，保证数据的传递和修改都是单向的，使得数据的流动更加可控和明确，减少了复杂性。

社区活跃：React拥有庞大的开发者社区和大量的第三方库和插件，提供了各种各样的解决方案和支持，使得React的可扩展性和可定制性也更加出色。

总之，React是一个功能强大、性能优异、生态丰富的JavaScript库，已经成为了构建现代Web应用程序的首选框架之一。

三.React的项目的创建

npm init vite
项目名称：myreact
选择react选项
选择javascript选项
cd myreact
执行安装：npm i
npm run dev
运行项目

四.jsx语法

 { }  js 表达式
 {/**/}注释
 className  类名
 数组可以有html标签  自动展开
 style对象会自动展开
 有且只有一个根节点

五.各个文件的含义

 App.css  根css
 App.js 根组件
 App.test.js  根测试文件
 index.css  入口css
 index.js   入口js
 .gitinore git  上传忽略文件
 package-lock.json  安装缓存地址
 package.json  包管理
 RREADME.md   项目说明文件

六.state(状态与数据)

1.使用
    state的数据是响应式更新的（数据变化，视图自动更新）
    {this.state.num}

2.更新
    this.setState({num:val})
    this.setState({num:value},()=>{})

七.事件 onClick={函数}

1. 响应函数
    onClick={函数}
    onDoubleClick={()=>{this.say()}}
2. 事件传参
    onClick={this.show.bind(this,'参数')}
    onClick={()=>{this.show('参数')}}

八.表单的双向绑定

<input value= {this.state.msg} onChange={e=>this.setState({msg:e.target.value})} />

九.dom引用

import React,{createRef} from 'react'
this.myref = creatRef()
<input ref = {this.myref}>
//获取dom  引用对象 this.myref.current

十.条件渲染

1.文本
1.1普通字符串 {变量名}
1.2.html字符串
<div dangerouslySetInnerHTML={{__html:richStr}}>
普通字符串 {变量名}
2.条件
2.1三元
{条件?<p>true展示</p>:<p>false展示</p>}
2.2&&
{条件&&<p>条件成立展示</p>}
3.循环
3.1数组会自动展开  {arr}
3.2数组中可以有html节点
3.3通过map映射
{arr.map((item,index)=><p key={index}>{item}</p>)}

十一.列表渲染

{this.state.list.map((item,index)=><h1 key={index}>{item}</h1>)}

1.使用map方法渲染一个数组
首先需要创建一个数组，将数组中的每个元素渲染到列表中，如下：

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['apple', 'banana', 'orange']
    };
  }
  render() {
    return (
      <ul>
        {this.state.list.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    );
  }
}
这里通过使用数组的map方法，将数组中的每个元素渲染成一个li元素，
通过设置每个li元素的key属性，可以提高列表渲染的性能

2.通过遍历props中的数据渲染列表
当从父组件中传递一个数组到子组件时，可以通过遍历该数组渲染一个列表，如下：
class List extends React.Component {
  render() {
    return (
      <ul>
        {this.props.list.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['apple', 'banana', 'orange']
    };
  }
  render() {
    return (
      <div>
        <List list={this.state.list}/>
      </div>
    );
  }
}
在子组件List中通过this.props.list可以获取到从父组件传递的数组，
然后通过遍历数组，将每个元素渲染成一个li元素。在父组件App中，
将数组作为props传递给子组件List。
这种方法可以让组件的代码更加清晰、易懂。

十二.组件类型

1.函数组件(推荐使用)
函数组件是一种简单的组件类型，它是一个JavaScript函数，
接收props作为参数并返回一个React元素。例如：

function App(props) {
  return <h1>Hello, {props.name}!</h1>;
}
在上面的例子中，我们定义了一个名为App的函数组件，
它接收一个名为props的对象作为参数，并在渲染时返回一个h1元素，
该元素显示了从props中获取的name属性。


2.类组件
类组件是ES6中的JavaScript类，它使用extends关键字继承React.Component类，
并实现一个render方法，该方法返回一个React元素。例如：

class App extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

在上面的例子中，我们定义了一个名为App的类组件，它实现了一个render方法，
并返回一个h1元素，该元素显示了从props中获取的name属性。


总结
React中有两种类型的组件：函数组件和类组件。
函数组件是一种简单的组件类型，它是一个JavaScript函数，
接收props作为参数并返回一个React元素；类组件是ES6中的JavaScript类，
使用extends关键字继承React.Component类，
并实现一个render方法，该方法返回一个React元素。