react入门
关注
分享
扫一扫
带你快速上手react
MIKE-zi
单片机 MCU ECU C语言，汇编软件工程师，IOS objective-c swift 研发工程师 前端开发H5，javaScript，typescript 前端三大框架 vue , react , angular ，微信原生小程序开发，taro跨平台小程序开发
展开
-
jsx中字符串换行
在jsx中实现字符串换行，首先需要换行的核心属性就是css中的white-space首先我们先设置样式css .DetailsTitle{ width: 100%; word-wrap: break-word; white-space: pre-wrap; }为了方便对比，我们写3种实现的方式<View className='DetailsTitle'>{'1、20210817全流程测试试卷\n2、考试须知原创 2021-08-20 19:21:16 · 1991 阅读 · 0 评论 -
react 函数组件useState异步变同步
需求 函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码 const [pageNo, setpageNo] = useState(1) const onPullUpRefresh = () => { console.log("上拉加载内容") console.log("上一次的pageNo", pageNo) setpageNo(pageNo + 1) consol原创 2021-08-18 10:16:40 · 6437 阅读 · 0 评论 -
react目录结构解析
通过脚手架搭建好最简单的react程序以后，结构目录如上图，对于有前端基础的同学来说，package.json gitignore 这些都很熟悉了。我们主要介绍一下react中的核心文件1.public中 index.html 这个文件是主页面 主页面的结构，后面我们写的页面都是加载到这个h5页面上。也就是说这个文件是我们程序的主结构页面<!DOCTYPE html><html lang="en"> <head> <meta chars...原创 2021-05-26 17:33:11 · 1978 阅读 · 2 评论 -
react搭建环境
react搭建环境非常简单，首先参考官网https://reactjs.org/docs/create-a-new-react-app.html1.首先安装 react脚手架工具npm install -g create-react-app2.用脚手架工具创建我们的工程 create-react-app sinplesinple为工程名 叫什么口可以3.进入到sinple文件夹下 启动程序 cd sinple npm start4.编译完成 效果如下.原创 2021-05-26 17:18:40 · 134 阅读 · 0 评论 -
react折叠显示更多
显示效果如上图 <div className='introView' > <div className='deptname'>骨科</div> <div className='deptphone'>门诊电话: <span>010-8888 8888</span></div> <div className={get...原创 2020-12-08 15:38:06 · 1600 阅读 · 0 评论 -
react 打包内存溢出----javaScript heap out of memory
package.json中增加这个配置--max-old-space-size=4096原创 2020-10-30 15:54:47 · 1877 阅读 · 0 评论 -
redux action的使用
继续上次的教程，还是先看图：这次我们完成对reducer的修改，然后更新dom，文件目录结构如下首先监听数据的改变，写好input组件的onchange方法 <Input value={this.state.inputValue} placeholder='todo info' style={{width: '300px', marginRight: '10px'}} onChange={this.handleInpu原创 2020-09-29 10:46:35 · 1949 阅读 · 0 评论 -
redux基础使用-redux flow
结合一个todoList我们学习一下redux的原理和基本使用，先看一张图结合这张图方便我们的理解。首先store就相当于一个管理员，reducer就相当于我们的数据库，用来记录数据的进出。action是用来操作的指令，去更新reducer中的数据。下面结合代码我们看一下。代码结构如下 ...原创 2020-09-28 15:27:43 · 304 阅读 · 0 评论 -
setState的新版用法
1.新版本的react更新了setState的用法，可以使用箭头函数赋值，效率更高。 <div> <label htmlFor="insertArea">输入内容</label> <input id="insertArea" className='input' value={this.state.inputValue} onChange={this.handleInputChange}原创 2020-08-12 16:54:32 · 586 阅读 · 0 评论 -
react ref的使用
<label htmlFor="insertArea">输入内容</label> <input id="insertArea" className='input' value={this.state.inputValue} onChange={this.handleInputChange} ref={(input) => {this.input = input}} />ref的使用 我们可以使用箭头函数，input参数 指代的就是当..原创 2020-08-12 16:46:11 · 399 阅读 · 0 评论 -
搭建react环境 react工程目录分析
首先搭建一个react的环境操作如下npm install -g create-react-appcreate-react-app my-appcd my-appnpm start创建一个my-app的react应用创建以后工程路径如下我们处理一下，真正需要的就是public里面的index.html。这里放着react需要挂载的根节点 <body> <noscript>You need to enable JavaScript to .原创 2020-08-12 10:28:30 · 217 阅读 · 0 评论