JSX

  1. 使用jsx的使用,用一个{}包裹起来,例如

    const method = {<div> 123 </div>}


  2. 使用()小括号,防止分号自动插入

    const element =
    ( <h1> Hello, {formatName(user)}! </h1> );

      

  3. 如果使用箭头函数,返回的是一个对象的话,使用()包围起来

    const element =
    ( <h1> Hello, {formatName(user)}! </h1> );

      

    组件数据传递

  4. 通过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获得到数据,这个数据是只读的,不要修改
  5. 子组件向父组件传递数据

    父:
    bindValue = (e) => { console.log(e)} <Son onChange = {this.bindValue}> 子: <input onChange={this.props.onChange}> 这样的话,子--->父 传递便实现了

      

    State

  6. constructor可以初始化state

    父:
    bindValue = (e) => { console.log(e)} <Son onChange = {this.bindValue}> 子: <input onChange={this.props.onChange}> 这样的话,子--->父 传递便实现了

      

  7. 取得state的值,通过 this.state.date

  8. 改变state,通过 this.setState({}),不要忘记里面要使用{}的方式

  9. 注意事项

    (1)修改方式
    
    // Wrong,页面不会重新渲染
    this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'});
    (2)更新是异步的,有时候通过setState设置数据后,打印,输出的值是不对的

      

    绑定函数

    由于this默认是不会绑定到Es6类中的,有几种方法

  10. constructor中设置

     constructor (props) {
    super(props) this.handleClick = this.handleClick.bind(this) }

      

  11. 使用箭头函数

    handClick = () => {this.handClick()}
    不要忘记了后面加入(),得让函数运行,这样的话还一传递参数,如下: handClick = (e) => {this.handClick(e)}

      

    条件渲染

  12. 控制显示和隐藏的时候可以使用 &&

    const show = 1
    show === 1 && <div>hello React </div> 这样就可以控制是否显示,可以通过一个事件控制show的值
  13. 三元表达式

    show ? (<div key='1'> show</div>): (<div key='2'> hidden </div>)
    最后加key,因为页面在渲染的时候会利用重复的元素,不是每一个都要重复渲染,加入key 就会认为是不同的元素

      

React开发时候注意点的更多相关文章

  1. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  2. React开发项目例子

    一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...

  3. Atom编辑器之加快React开发的插件汇总

    汇总下比较实用的atom插件[偏react开发的]-- 博主发现这个还是比较全面的! atom-react-autocomplete–项目内,组件名及状态的自动补全  autocomplete-js- ...

  4. 用Inferno代替React开发高性能响应式WEB应用

    什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...

  5. vsCode工具做react开发,几个常用插件

    一.环境准备: 1.下载安装VSCode,Node.js,Yarn 2.打开命令行终端或powershell,输入yarn global add create-react-app安装react的脚手架 ...

  6. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  7. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  8. 【React】使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  9. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  10. react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题

    步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...

随机推荐

  1. MariaDB修改端口号

    修改端口号 打开my.ini文件

  2. 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 ...

  3. springboot2.04+mybatis-plus+swagger2+CodeGenerator

    @author zhangyh SpringBoot技术栈搭建个人博客[项目准备]  RESTful API就是一套协议来规范多种形式的前端和同一个后台的交互方式 原型设计 事实上,我是直接先去找的原 ...

  4. MySql Connector/C++8简介

    MySql Connector/C++8是一个用于连接MySQL服务器的C++应用程序.Connector/C++8可用于访问实现文档存储的 MySQL服务器,或者使用SQL查询以传统方式访问.它支持 ...

  5. python 面向对象类与类之间的关系

    主要内容: 1. 依赖关系 2. 关联关系, 组合关系, 聚合关系 3. 继承关系 4. 类中的特殊成员 引子 大千世界, 万物之间皆有规则和规律,我们的类和对象是对大千世界中的所有事物进行归类. 那 ...

  6. 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/, ...

  7. vue入门笔记

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  8. ecshop漏洞修复 以及如何加固ecshop网站安全?

    由于8月份的ECSHOP通杀漏洞被国内安全厂商爆出后,众多使用ecshop程序源码的用户大面积的受到了网站被篡改,最明显的就是外贸站点被跳转到一些仿冒的网站上去,导致在谷歌的用户订单量迅速下降,从百度 ...

  9. 谭浩强第四版第九章课后习题12>>>建立一个链表,每个节点包括:学号、姓名、性别、年龄。输入一个年龄,若链表 中的结点所包含的年龄等于此年龄,则删除此结点。

    #include<stdio.h> #include<stdlib.h> #define N sizeof(link) typedef struct lin { struct ...

  10. 人人都会设计模式:观察者模式--Observer

    https://segmentfault.com/a/1190000012295887 观察者模式是抽像通知者和观察者,达到具体通知者跟具体观察者没有偶合.能达到不管是切换通知者,或者是切换观察者,都 ...