React开发时候注意点
JSX
使用jsx的使用,用一个{}包裹起来,例如
const method = {<div> 123 </div>}
使用()小括号,防止分号自动插入
const element =
( <h1> Hello, {formatName(user)}! </h1> );如果使用箭头函数,返回的是一个对象的话,使用()包围起来
const element =
( <h1> Hello, {formatName(user)}! </h1> );组件数据传递
通过props
function Comment(props) {
return ( <div className="Comment"> <div className="UserInfo"> <Avatar user={props.author} /> <div className="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }这样的话,就可以通过prop获得到数据,这个数据是只读的,不要修改
子组件向父组件传递数据
父:
bindValue = (e) => { console.log(e)} <Son onChange = {this.bindValue}> 子: <input onChange={this.props.onChange}> 这样的话,子--->父 传递便实现了State
constructor可以初始化state
父:
bindValue = (e) => { console.log(e)} <Son onChange = {this.bindValue}> 子: <input onChange={this.props.onChange}> 这样的话,子--->父 传递便实现了取得state的值,通过 this.state.date
改变state,通过 this.setState({}),不要忘记里面要使用{}的方式
注意事项
(1)修改方式 // Wrong,页面不会重新渲染
this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'});
(2)更新是异步的,有时候通过setState设置数据后,打印,输出的值是不对的绑定函数
由于this默认是不会绑定到Es6类中的,有几种方法
constructor中设置
constructor (props) {
super(props) this.handleClick = this.handleClick.bind(this) }使用箭头函数
handClick = () => {this.handClick()}
不要忘记了后面加入(),得让函数运行,这样的话还一传递参数,如下: handClick = (e) => {this.handClick(e)}条件渲染
控制显示和隐藏的时候可以使用 &&
const show = 1
show === 1 && <div>hello React </div> 这样就可以控制是否显示,可以通过一个事件控制show的值三元表达式
show ? (<div key='1'> show</div>): (<div key='2'> hidden </div>)
最后加key,因为页面在渲染的时候会利用重复的元素,不是每一个都要重复渲染,加入key 就会认为是不同的元素
React开发时候注意点的更多相关文章
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- React开发项目例子
一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...
- Atom编辑器之加快React开发的插件汇总
汇总下比较实用的atom插件[偏react开发的]-- 博主发现这个还是比较全面的! atom-react-autocomplete–项目内,组件名及状态的自动补全 autocomplete-js- ...
- 用Inferno代替React开发高性能响应式WEB应用
什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...
- vsCode工具做react开发,几个常用插件
一.环境准备: 1.下载安装VSCode,Node.js,Yarn 2.打开命令行终端或powershell,输入yarn global add create-react-app安装react的脚手架 ...
- 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- react学习笔记(一)用create-react-app构建 React 开发环境
React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...
- 【React】使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- Webpack笔记(二)——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题
步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...
随机推荐
- MariaDB修改端口号
修改端口号 打开my.ini文件
- 123. Best Time to Buy and Sell Stock III ——LeetCode
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- springboot2.04+mybatis-plus+swagger2+CodeGenerator
@author zhangyh SpringBoot技术栈搭建个人博客[项目准备] RESTful API就是一套协议来规范多种形式的前端和同一个后台的交互方式 原型设计 事实上,我是直接先去找的原 ...
- MySql Connector/C++8简介
MySql Connector/C++8是一个用于连接MySQL服务器的C++应用程序.Connector/C++8可用于访问实现文档存储的 MySQL服务器,或者使用SQL查询以传统方式访问.它支持 ...
- python 面向对象类与类之间的关系
主要内容: 1. 依赖关系 2. 关联关系, 组合关系, 聚合关系 3. 继承关系 4. 类中的特殊成员 引子 大千世界, 万物之间皆有规则和规律,我们的类和对象是对大千世界中的所有事物进行归类. 那 ...
- Modify the apache2 default document and home page on ubuntu (ubuntu下修改apache2默认目录和默认主页)
Change the apache2 default website directory As we know, The apache2 default directory at /var/www/, ...
- vue入门笔记
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...
- ecshop漏洞修复 以及如何加固ecshop网站安全?
由于8月份的ECSHOP通杀漏洞被国内安全厂商爆出后,众多使用ecshop程序源码的用户大面积的受到了网站被篡改,最明显的就是外贸站点被跳转到一些仿冒的网站上去,导致在谷歌的用户订单量迅速下降,从百度 ...
- 谭浩强第四版第九章课后习题12>>>建立一个链表,每个节点包括:学号、姓名、性别、年龄。输入一个年龄,若链表 中的结点所包含的年龄等于此年龄,则删除此结点。
#include<stdio.h> #include<stdlib.h> #define N sizeof(link) typedef struct lin { struct ...
- 人人都会设计模式:观察者模式--Observer
https://segmentfault.com/a/1190000012295887 观察者模式是抽像通知者和观察者,达到具体通知者跟具体观察者没有偶合.能达到不管是切换通知者,或者是切换观察者,都 ...