React
文章平均质量分 53
大名张无忌
前端开发,技术栈涉及:Vue、React、小程序,交流可以私信/邮件:2285546178@qq.com
展开
-
React函数式组件项目小羽毛总结
路由跳转react-router提供了history.push api,直接使用push即可。注意组件需要用withRouter包起来,否则会报错history不存在 history.push("/my");(in promise) TypeError: history.push is not a function即使withRouter导出了,这里也要用props.history,因为history.push的api挂在props上面...原创 2021-03-07 21:14:26 · 772 阅读 · 0 评论 -
浅析React useState原理
最简单的实现useState的数据存在React某个地方。useState是一个函数,接收一个初始值,存在自己的变量N中。存的时候判断下,如果已经有值,不存初始值;是undefined的时候再存。setN是一个函数,用接收来的新的值去修改state里面的变量。...原创 2020-12-21 19:03:43 · 535 阅读 · 0 评论 -
React 函数组件间通信
props——父子组件//父组件中直接传递变量名,子组件中props拿到function Father(){const a=100;return(<><Child1 a={a} /></>)}function Child1(props){const {a}=props;return(<div>{a}</div>)}useContext:局部的全局上下文变量——祖先和后代组件//声明一个context变量c.原创 2020-12-21 18:20:13 · 1110 阅读 · 0 评论 -
React支持dart-scss(偷梁换柱)
背景node-sass下载速度慢,甚至下载报错。本地编译速度慢。而官方极力推荐使用Dart-sass,Dart运算速度快、易于安装所以希望在React项目中使用dart-scss。使用步骤:命令行安装yarn add dart-sass安装成功后将css文件后缀修改为scss,结果报错告知使用node-scss。查了一下才知道React只支持node-scss不支持dart-scss。于是google上输入create react app dart sass搜索研究,在github的crea原创 2020-12-13 23:06:39 · 821 阅读 · 1 评论 -
Redux基本理念
设计思想Web 应用是一个状态机,视图与状态是一一对应的。所有的状态,保存在一个对象里面。适用场景用户的使用方式复杂不同身份的用户有不同的使用方式(比如普通用户和管理员)多个用户之间可以协作与服务器大量交互,或者使用了WebSocket View要从多个来源获取数据概念和API用户接触的是View层,State修改会导致View更新。StoreStore 就是保存数据的地方。整个应用只能有一个 Store。用createStore生成import { createStore原创 2020-12-12 20:21:33 · 208 阅读 · 0 评论 -
纯函数
只要是同样的输入,必定得到同样的输出。纯函数是函数式编程的概念,必须遵守以下一些约束。不得改写参数不能调用系统 I/O 的API不能调用Date.now()或者Math.random()等不纯的方法,因为每次会得到不一样的结果...原创 2020-12-12 20:09:37 · 57 阅读 · 0 评论 -
React小书中得CommentList的需求实现
*原文:评论功能划分成四种组件,CommentApp、CommentInput、CommentList、Comment。CommentApp:评论功能的整体用一个叫 CommentApp 的组件包含起来。CommentApp 包含上部和下部两部分。*所有的数据以state形式存在APP里,因为Input和List都要用到。CommentInput:上面部分是负责用户输入可操作的输入区域,包括输入评论的用户名、评论内容和发布按钮,这一部分功能划分到一个单独的组件 CommentInput 中.原创 2020-05-24 16:08:15 · 517 阅读 · 0 评论 -
React渲染列表并修改其中某项数据
功能:一个Persons组件列表,有3个人,每个人有name和age两个属性。有一个input框,输入值时对应的任的age发生变化。知识点:1、因为每个Person中会有复用代码,如render的return值,所以抽象成一个函数组件;2、函数组件与类组件:函数组件—无状态组件,没法使用state。更简单,其中没有this,接受参数返回值即可,无构造函数更多见:https://www.jianshu.com/p/e220ef5b0e093、函数组件与高阶组件:函数:传入一些参数,返回DOM元.原创 2020-05-18 22:47:59 · 2872 阅读 · 0 评论 -
React小书没提到但是很有用的基础知识
ReactDom.render渲染多个元素时需要包裹起来,但是不一定用div,也可以用其他的1、<>yuan<>2、ul等原创 2020-05-18 21:34:45 · 151 阅读 · 0 评论 -
Count计数器更新state值
class Count extends Component { constructor() { super() this.state = { num: 0 } } addNum() { console.log(this); if (this.state.num < 10) { this.setState((prevState) => { return { num: prevState.num + 1 }原创 2020-05-17 21:17:48 · 245 阅读 · 0 评论 -
React中的ref使用
老师说最好不要用不要用不要用,只要React.js有方法的话使用方法很神奇,搞不懂含义暂且先这么记着吧: ref={( p)=>this.p=p}class Post extends Component { goodHeight(){ console.log(this.p.offsetHeight); } render () { return (<p className='pp' ref={(p)=>this.p=p} onClick={thi.原创 2020-05-13 22:32:58 · 229 阅读 · 0 评论 -
React状态提升,子组件的值放在父组件中,使同级子组件可以使用
父组件:PercentageApp。子组件:Input,用来输入数字;PercentageShower:用来展示百分比。父组件的state中存num值,并写一个修改值的changeNum函数,作为参数numChange传递给Input。Input中,用户输入值时,触发方法changeValue,changeValue中调用父组件传来的numChange方法,并把用户输入的值传递给这个方法。最后,子组件PercentageShower接收父组件传来的参数num并使用即可。class Input ex.原创 2020-05-13 20:30:11 · 209 阅读 · 0 评论 -
React渲染列表数据
JSX中使用{},{}里如果放入数组,React.js会把数组里的一个个元素罗列并渲染出来。const lessons = [ { title: 'Lesson 1: title', description: 'Lesson 1: description' }, { title: 'Lesson 2: title', description: 'Lesson 2: description' }, { title: 'Lesson 3: title', description: 'L原创 2020-05-13 18:17:49 · 495 阅读 · 0 评论 -
React中配置组件的props和state值
需求:电脑Computer组件,包含Screen组件和按钮button。Computer组件:有状态status:on和off。Screen组件:有props.showContent属性,接收传入值,如无默认“哈哈哈默认值”。显示一个文本,有onText和offText两个值,是电脑组件状态分别为on和off时的对应值。button按钮,可以修改Computer的statusclass Screen extends Component { render () { return (原创 2020-05-11 20:59:23 · 148 阅读 · 0 评论 -
React事件监听和State状态修改
on*函数可直接使用,但只能使用在html标签上,自己创建的组件标签不可狗子组件:点击会打印bark和runclass Dog extends Component { bark () { console.log('bark') } run () { console.log('run') } render () { return (<div onClick={ //有两个方法需要实现,所以用一个函数进行封装 ()=>.原创 2020-05-10 19:44:22 · 4518 阅读 · 1 评论 -
JSX 新手上道
理解下来,JSX就是封装起来了一个方法。可以直接写html元素,而不用自己写DOM的createElement一步步去操作了。一开始有点难以理解,多敲几遍其实非常好上手//class创建一个组件,方便以后复用、嵌套class Xx1 extends Component{//render渲染render(){return(//return里面直接写html元素,也可以直接使用组件<Xx2/>,还可以写表达式{xxx},{xxx}可以写任何js代码)}}//最后把这个类Xx1插原创 2020-05-10 11:50:04 · 101 阅读 · 0 评论 -
React修改页面标题,初次渲染
1、在建立的React项目的index.js文件中,创建函数renderContentfunction renderContent(content){ class Haha extends Component{ render(){ //JSX语法可以直接return Html结构 return( <h1>{content}</h1>); } } ReactDOM.render( //ReactDOM.render(templa原创 2020-05-09 23:38:22 · 415 阅读 · 0 评论 -
vscode新建React项目及初始化
1、npm init my-app2、npm start该项目就发布了初始化:1、在index.js文档中删除import app的语句2、删除app的js和css原创 2020-05-08 23:35:57 · 947 阅读 · 0 评论