React
樱桃小丸犊子吖
“落日弥漫的橘,天边透亮的星”
展开
-
webpack 版本过高引起 初试npx create-react-app hello-react报错
创建项目并启动npm install -g create-react-app,create-react-app hello-react,cd hello-react,cnpm start然后成功报错:BYs-MacBook-Pro:hello-react wangbing$ cnpm start> hello-react@0.1.0 start /Users/wangbing...原创 2019-10-30 10:35:37 · 397 阅读 · 0 评论 -
绑定文本框与state中的值(单向数据流)
上文已提到:在 Vue 中,默认提供了v-model指令,可以很方便的实现 数据的双向绑定;但是,在 React 中,默认只是单向数据流,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ; 如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听onChange事件,拿到最新的数据,手动调用this.setState({ })...原创 2019-10-21 11:39:09 · 190 阅读 · 0 评论 -
组件三大属性_state
state是组件对象最重要的属性, 值是对象(可以包含多个数据)在 Vue 中,默认提供了v-model指令,可以很方便的实现 数据的双向绑定;但是,在 React 中,默认只是单向数据流,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ; 如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听onChange事件,拿到最新...原创 2019-10-21 11:02:21 · 204 阅读 · 0 评论 -
两种创建组件方式的对比
注意:使用class关键字创建的组件,有自己的私有数据( 即 this.state )和生命周期函数; 注意:使用function创建的组件,只有props, 没有自己的私有数据和生命周期函数;用构造函数创建出来的组件:叫做“无状态组件”【无状态组件今后用的不多】用class关键字创建出来的组件:叫做“有状态组件”【有状态组件用的比较多】什么情况下使用有状态组件?什么情况下使用无状...原创 2019-10-18 18:08:45 · 140 阅读 · 0 评论 -
React中创建组件(二)
React中创建组件第2种 - 创建组件的方式使用 class 关键字来创建组件ES6 中 class 关键字,是实现面向对象编程的新形式了解ES6中 class 关键字的使用class 中 constructor 的基本使用实例属性和实例方法静态属性和静态方法使用 extends 关键字实现继承// 语法: class 子类 extends 父类 {}基于clas...原创 2019-10-18 17:37:32 · 92 阅读 · 0 评论 -
React中创建组件(一)
React中创建组件第1种 - 创建组件的方式 使用构造函数来创建组件,如果要接收外界传递的数据,需要在构造函数的参数列表中使用props来接收;必须要向外return一个合法的JSX创建的虚拟DOM创建组件: function Hello () { // return null return <div>Hello 组件</div> }Rea...原创 2019-10-17 13:54:02 · 133 阅读 · 0 评论 -
JSX简介 ---JSX语法注意事项
import React from 'react'import ReactDom from 'react-dom'JSX简介 ---JSX语法注意事项原创 2019-10-16 20:20:01 · 169 阅读 · 0 评论 -
Webpack4.0如何启用 jsx 语法
如何启用 jsx 语法?安装 babel 插件运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D运行cnpm i babel-preset-env babel-preset-stage-0 -D安装能够识别转换jsx语法的包 babel-preset-react运行cnpm i babel-p...原创 2019-10-16 11:18:47 · 291 阅读 · 0 评论