admin管理员组

文章数量:829188

小薛实习记录册

6/20-6/22

第一天上午熟悉环境,下午办理入职首先,申请各种限权账号

第二天居家上班,看了一天的react。具体内容如下

  1. react开始是从index,html开始跳转到index.js,在转到其他的组件
  2. 组件大体可以分为三种,第一种就是变量定义的HTML标签。引用是直接用,不用<>,类组件可以用简单的rcc+tab进行设置,要安装一个插件
  3. 对于组件化,我们导出和导入有两种方式,export和export default两种,具体区别如下。
  4. 对于组件应用就是用<>来进行引用,选择是单括还是双阔取决于这个里面有没有元素,要是没有元素,则可以进行单括
  5. 对于组件中内容的引用,如果是类组件,{this.state.count}或者{this.props.count},这两个有什么区别。
  6. 对于传的参数,函数用props.num,类组件用this.props,num
  7. 函数组件用return(标签)类组件用render(){return(标签)}
  8. 对于修改state值的更改,只能用this.setState()里面可以传两个参数第一个传一个对象,{num:this,state.num+1},第二个传一个回调函数,修改成功后会回调这个函数。
  9. 对于一个事件的函数,比如onClick={},里面是函数,函数注意this指向,我们可以在constructor里进行bind转换一下this。
  10. 对于属性为变量的我们用花括号进行扣起来,要是是字符串的形式,我们就直接用双引号进行。
  11. 条件判断,可以通过判断进行return相应的标签,用三目运算符
  12. 我们对数组内容进行遍历,我们可以用数组的map()方法进行遍历出标签,然后我们在引用这个标签就可以了
  13. 事件onclick onchange onsubmit
  14. 对于输出框的设置,我们可以用form,form里面有onsubmit函数,这个可以与input然后type用submit
  15. 对于输入标签,我们可以写一个函数,如果我们用的name是个变量,我们要可以用【】进行括起来表示变量
  16. 对于输入控件,我们可以onchange进行监听,监听函数里面有一个event对象,react是不支持true/false的阻止默认行为,要使用prevent default进行阻止。

针对问题2

 具体介绍一下这几个插件,第一个是代码补全插件,第二个是英译汉转化插件,第三个是单词拼错提醒,第四个就是我们用rcc或者rcjc+tab进行快速创建组件,最后一个是给我们的文件有一个好看的图标。


针对问题3

对于组件,export default是只能抛出一个组件,在单个文件下,这个组件在应用调用时可以与这个组件名不一样,路径对就可以。export支持单文件多个组件抛出,抛出的组件要用大括号进行括起来,组件抛出的名称必须与引用名称相同,引用时也要用大括号括起来。


针对问题5

import React, { Component } from 'react'export default class test extends Component {constructor(){super();this.state={count:0}}render() {return (<div><div>{this.state.count}</div></div>)}
}

具体结构如上 ;

state中的变量更像是我们自己定义的变量,是属于私有变量的,但是props是属于传过来的变量,是上一级的传过来的,我们要是修改我们的state,我们要用this.setstate()


下载项目,首先我们下载git,然后我们可以通过git clone +git网址在git bush here 中,在下载后进行安装各个组件库包,可以用npm i进行,如果有的包没有或者关停了,我们就可以找到相应的配置,删除相应的配置加载,然后把包放到我们的node-modules中。

npm相关知识npm


6-27

react中对数据进行管理的几个工具redux,context,

首先,context

可以先建一个文件

//ThemeContext.jsimport React from 'react';const ThemeContext = React.createContext('light');export default ThemeContext;

将这个文件引入import ThemeContext from '../ThemeContext'

我们可以在用到这些数据的地方进行<ThemeContext.Provider >这里面有一个value属性就是我们要用到的公共的数据池,我们刚开始定义的react.createcontext()里面是默认值

对于类组件。我们可以用static中定义contextType=新建的context,

这样我们在render()中就可以通过this.context进行取值

对于函数,我们可以直接对对象进行解析,用

const {name,age,date}= React.useContext(ThemeContext);

对于我们传值,可以用props进行替代,定义一个函数组件

我们可以用我们创建的这个context.Consumer包裹一个函数,因为我们的这个consumer就会自动行函数中进行传值(Value)=> <ConsumerDemo  {...Value}  />

这样就实现了一个context进行跨组件传值的操作


修改context的值

对于类组件的话,我们要修改我们的值,我们可以在祖组件上定义一个函数,把我们这个函数连同我们的值一起进行传入,函数组件的话,直接用useContext(),前面一个获取这个的值,一个获取函数,函数传参就是我们要改的值。

白天整理:

修改context的值函数组件(传参数的)可以用usestate()创建修改和初始化的这个值,我们传到子组件可以用函数usecontext解析出来,或者用类组件进行contexttype=creatcontext对象,然后调用this.context,如果是类组件对其进行包裹,新建函数,用setstate()进行修改,不要忘了在constructor中进行bind()转换this,然后传的时候把函数也传过去。

usecontext()里面是我们创建的context对象,是函数特有的,可以直接解构,usestate()也是函数特有的,用来定义和修改定义的值。类组件是用this,setstate()进行修改,里面是一个函数传参是state,函数内部是一个对象{要改变的变量:计算方法}

usestate()介绍里面两个参数,一个是值,一个是修改这个值的函数,这个函数有几个参数,是一个对象,对象内部是(参数名:参数现在的值)。

传参的方式还有props,修改的方式仍然是传递父组件的函数进行修改


recoil进行状态管理

首先对其进行安装,我们进行引用

import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil';

在跟目录下加RecoilRoot,我们在下面可以获取到他的值

import {atom} from 'recoil'const listPro=atom({key:'listPro',default:{list:'xxxxx',friendName:'辛xinxin'}
})
export default listPro

将我们的值存入其中,然后将这个引入到用数据的页面,我们通过useRecoilState()进行获取修改和获取这个的值,对于类组件,我们用函数组件包一下,比如一个箭头函数,return一个组件,给组件传参。

新的状态管理工具recoil,首先对其进行安装,我们要创建一个文件,可以创建多个,但是里面的key要不一样,将recoil引入主界面,import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil';这个只能用函数组件不能用于类组件,要是用到类组件中可以外面包一层函数再来,在主页面加上RecoilRoot,然后将我们子页面导入我们创建的这个atom文件位置,我们用uesRecoilState()可以获取他的值,在通过props进行引入,对于selector,他和我们的atom差不多他有key和get,get为一函数,传参为get,我们可以通过get(atom或者selector)来只获取他的值。({get})=>{get(atom)}.

本文标签: 小薛实习记录册