react基础学习总结

最新推荐文章于 2022-05-24 13:17:59 发布

莫尔道嘎老范

最新推荐文章于 2022-05-24 13:17:59 发布

阅读量237

点赞数

分类专栏：笔记文章标签： react

本文链接：https://blog.csdn.net/weixin_44134588/article/details/109715805

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一,jsx

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面;

在jsx中只需要使用大括号进行包裹即可使用任意的js的表达式;

1,基本使用

1.jsx中可以使用js中的表达式;三元,函数都可以,只要是表达式都可以;

渲染函数表达式时,需要进行调用,否则会报错,或者直接使用<>将函数名包裹自闭合
循环列表渲染,{arr.map(item =>
{item.name}
)}
添加样式可直接新建css文件引入,或者直接在行内添加,行内添加需要使用两个{{}}

2.可以嵌入表达式,因为jsx自身也是表达式,所以可以在其他地方直接嵌入jsx表达式

3,不能直接使用对象作为表达式;

4,{}中不能出现语句,比如if(),for()

2,类组件

类组件首字母大写
通过继承React.Component父类获得父类的属性和方法;
必须提供render方法,且有返回值;

3,组件使用

1,将多个组件放到一个js文件中

2,封装成独立的组件,使用时导入

二,rander方法

rander的返回值就是在屏幕上所要展示的内容,返回的是一个react元素;

三,传值方式(组件间的通信)

1,父传子

1,在要传递的组件中声明要传递的值,如:

renderSquare(i){
return <square value={i} />
}

其中i就是要传递的值

2,接受和使用值

{this.props.value}

即可接收到父组件传来的值

也可以直接传递事件;

2,子传父

利用回调函数
父组件向子组件传递一个回调函数
子组件通过props接收到,然后进行调用,通过该回调函数将值传递给父组件

3,兄弟间传值

将数据进行状态提升
将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
父组件向子组件提供数据和操作数据的方法;
子组件想要改变数据依然是通过向父组件传值的方式进行

4,命名规范，

通常会将代表事件的监听 prop 命名为 on[Event]，将处理事件的监听方法命名为 handle[Event] 这样的格式

四,添加事件

直接在return后的标签中声明onclick即可添加点击事件,后面可以直接跟事件处理函数;

也可使用箭头函数优化代码;

声明的事件处理函数直接写在该组件construction构造函数下面;

写到类组件里面,后面render返回时可以直接this.事件名添加事件(因为是在类中)
直接写到render返回标签的行内
在JS中，class组件的方法默认不会绑定this，调用函数时需绑定this或使用箭头函数

五,处理数据setState()方法

setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式

每次调用setState时,React都会自动更新其子组件

state中存放数据
法1:直接声明state={};

法2:在constructor构造函数中

  this.state = {
            count:0
        }

setState()更新数据是异步的
注意：使用该语法，后面的setState不要依赖前面setState的值
多次调用setState，只会触发一次render

六,传值命名规范

命名规范，通常会将代表事件的监听 prop 命名为 on[Event]，将处理事件的监听方法命名为 handle[Event] 这样的格式

七,不可变性

react中的不可变性可以实现"时间旅行的功能",方便回顾历史步骤,查看到数据变化,进而实现撤销和恢复额功能,

本质:不直接修改数据

八,函数组件

如果某组件只包含一个render方法,不包含state,那么使用函数组件会更简单;

直接接收props作为参数,返回需要渲染的元素;

九,使用createElement

1,创建一个元素

let h1 = React.createElement('h1',null,'一级标题')
//三个参数,1要创建的名称;2元素的属性;3以及以后的参数是元素的节点(文本节点,也可再次使用createElement创建节点)

2,渲染

// 渲染到页面

ReactDOM.render(h1,document.getElementById('root'))
//两个参数  1,要创建的react元素,2挂载点

ReactDOM.render()方法

将DOM元素渲染到页面指定的位置

十,React脚手架使用

npx create-react-app my-app
//这种方式不用安装

启动项目:根目录运行 npm start

十一,一次学习,到处使用

ReactDOM.render是渲染到web应用

做其他的使用其他的的进行导入

十二,受控组件

受控组件:受到react控制的表单元素

将state的值赋给input框,同时添加change事件,这样就保证数据的统一

多表单组件优化:

给每一个表单组件设置一个独立的name属性;

在事件处理函数中通过事件对象.属性名就可获取,进而进行操作

十三,安装props校验 npm i prop-types

安装包 prop-types (yarn add prop-types | npm i prop-types)
导入prop-types 包
使用组件名.propTypes={} 来给组件的props添加校验规则
校验规则通过PropTypes对象来指定
```
App.propTypes={
//规定colors属性必须是数组类型,否则会报错
colors:PropTypes.array
}
```
常见类型

创建的类型： array、bool、func、number、object、string
React元素类型：element
必填项：isRequired
特定结构的对象： shape({})

十四,高阶组件

高阶组件:

在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回
以接收参数的形式,接收到要增强的组件
调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并返回

十五,react路由

**Router组件：**包裹整个应用，一个React应用只需要使用一次
- 两种常用的Router： HashRouter和BrowserRouter
- HashRouter：使用URL的哈希值实现（localhost:3000/#/first）
- 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
**Link组件：**用于指定导航链接（a标签）
- 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
**Route组件：**指定路由展示组件相关信息
- path属性：路由规则，这里需要跟Link组件里面to属性的值一致
- component属性：展示的组件
- Route写在哪，渲染出来的组件就在哪

执行过程: