reactjs
文章平均质量分 50
米斯特尔曾
在前端这条道上越走越模糊了
展开
-
react hooks中的useState如何实现的
react useState如何实现的import { useState } from 'react';export function User() { const [name, setName] = useState(''); const [age, setAge] = useState(18); const onChangeName = (e) => { setName(e.target.value); } const onChangeAge = (e) => { se原创 2021-10-24 22:14:10 · 373 阅读 · 0 评论 -
react hooks之useRef
在函数组件中的一个全局变量,不会因为重复 render 重复申明const SaveVal = () => { let timer = setTimeout(() => {}); let ref = useRef(timer); let [count, setCount] = useState(0) return ( <div> {timer}~{ref.current}~{count}<br />原创 2020-11-03 19:39:17 · 404 阅读 · 0 评论 -
react hooks之useEffect
相对于class component来说,所有的生命周期都在effect中effect定义官方的index.d.tstype EffectCallback = () => (void | (() => void | undefined));type DependencyList = ReadonlyArray<any>;function useEffect(effect: EffectCallback, deps?: DependencyList): void;接受的第一原创 2020-11-02 21:36:21 · 1031 阅读 · 0 评论 -
react hooks之useState
import React , { useState } from 'react';export const Demo11 = () => { let [count, setCount] = useState(() => { return new Date().getTime(); }); return ( <div> <div>{count}</div>原创 2020-11-02 20:33:56 · 146 阅读 · 0 评论 -
react&react-redux中各种类型定义
import React, { FC } from 'react';import { connect, ConnectedComponent } from 'react-redux';export interface IPropsFromParent { name: string;}export interface IPropsFromRedux { count: number;}export interface IProps extends IPropsFromParent,原创 2020-10-26 14:46:40 · 425 阅读 · 0 评论 -
react 类图关系(粗略,未分接口还是类)
后续学习源码时添加类的详细信息原创 2020-10-25 17:07:05 · 549 阅读 · 0 评论 -
react-redux的使用
react-redux的使用代码:github-learn-react分别存放action和reducer如postReducerexport const postReducer = function (state: any = { list: [{ title: 'hellow', id: -1 }] }, action: any) { switch (action.type) {...原创 2019-10-21 21:09:13 · 192 阅读 · 0 评论 -
reac之reducer初步使用
redux 初步学习创建reduceconst counterReducer = function(state: any = {count: 1}, action: any) { switch(action.type){ case 'COUNT_ADD': return {...state, count: state.count + 1}; default: ...原创 2019-10-14 20:30:48 · 417 阅读 · 0 评论 -
react之受控组件和非受控组件
react受控组件和非受控组件代码受控组件import React from 'react';import './controll.scss';export interface IControllProps {}export interface IControllState { username: string; password: string;}export class...原创 2019-09-08 22:17:14 · 167 阅读 · 0 评论 -
react路由
路由代码:github-learn-react安装zengwe$ npm install react-router-dom --savezengwe$ npm install @types/react-router-dom --save-dev用的typescript所安装@types/react-router-dom使用import React from 'react';i...原创 2019-09-04 17:13:27 · 299 阅读 · 0 评论 -
react学习之组件间通信
react学习之组件间通信代码:github-learn-react父组件与子组件通信通过props传递export interface IChildProps { parentTellMe: string;}export interface IChildState {}export class Child extends React.Component<IChildP...原创 2019-09-04 17:12:46 · 343 阅读 · 0 评论 -
react之组件基本用法
react之组件基本用法代码:github-learn-react普通组件代码import React from 'react';import './regular.scss';export interface IRegularProps {}export interface IRegularState {}export class Regular extends Rea...原创 2019-09-04 17:12:03 · 296 阅读 · 0 评论 -
create-react-app 添加 sass
#下载依赖npm install node-sass sass-loader --save-dev#修改webpack配置npm run eject在./config/webpack.config.js下的oneOf:中添加 { test: /\.scss$/, loaders: ['style-loade...原创 2019-08-20 16:14:29 · 206 阅读 · 0 评论 -
react学习笔记 路由(1)
react 路由(1)install相应的模块zengwe:try-router$ npm install --save react-router-domzengwe:try-router$ npm install --save-dev @types/react-router-domreact-router-dom这个包比react-router要多一下东西,具体可百度,这个为type...原创 2019-02-12 11:18:38 · 200 阅读 · 0 评论 -
react 组件通信
父级组件和子组件或者子组件与父组件通信import React, { Component } from 'react';import './App.css';import { LifeCycleComponent } from './pages/life-cycle';class App extends Component<any, {count: number}> { s...原创 2018-12-05 23:01:36 · 307 阅读 · 0 评论 -
react组件基本使用(typescript)
如果是用JavaScript开发可以忽略一切typescript的东西也是可以照常执行的新建一个组件interface Component<P = {}, S = {}, SS = any>{ // ..... }组件基类的接口定义,P表示props,S表示state,SS未知,默认可以啥也不传新建import React, { Component } from 'r...原创 2018-12-04 22:03:49 · 6198 阅读 · 0 评论 -
react学习-开篇
工具create-react-app安装npm install -g create-react-app当前使用版本 2.0.4(create-react-app -V)创建democreate-react-app demo1安装完成的目录命令运行 npm run start默认端口为3000测试 npm run test打包 npm run build需要对...原创 2018-10-24 21:30:42 · 175 阅读 · 0 评论