React 急急如律令

1.ES6

ES5 ES6
var var let const
function (){}
function foo(){}
()=>{}
foo(){}
function (){
    foo:function(){}
}
class A{
    foo(){}
}
new A{}
var name=‘aa‘,
      age=21;
return{
      name: name,
      age: age
}
var name=‘aa‘,
age=21;
return{name,age}
  module.exports=A

2.JQuery

2.1 查询:

$(‘#id‘)

$(‘.class‘)

2.2 dom和jquery对象切换

let $div = $(‘#div‘),
    div = document.getElementById(‘div‘);
console.log($div === div)
..false
console.log(div === $div[0])
..true
console.log($(div) === $div)
..true

2.3 ajax

$.ajax({

//content

});

2.4 promise

promise.done(fn).fail(fn).always(fn);

3.React

3.1 对象:

React

ReactDom

3.2 方法:

React.createClass({});

ReactDom.render(sources,target);

3.3特性:

3.3.1 state(状态):

getInitialState(

return{

key: value

}

)

setState({key: value});//不能用”=”赋值

事件—>状态—>渲染

3.3.2 props(属性):

getPropTypes(

return {

key: value.isRequired//指定属性的类型.是否必须

}

)

属性由父级传入,状态由自己控制.

3.3.ref(内部Id):

render(){

return {

<p ref=‘text‘ >123</p>

<button onclick=onclick() />

}

onclick(){

this.refs.text.props.value:123

}

4.生命周期

getPropType();

getInitialState();

componentWillMount();

render();

componentDidMount();

componentWillUpdate();

render();

componentDidUpdate();

componentWillUnMount();

未完待续…

时间: 2024-10-11 17:54:30

React 急急如律令的相关文章

谈谈APP架构选型:React Native还是HBuilder

原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid app开发技术方案:RN(react native),HBuilder.React Native是大名鼎鼎的Facebook的开源技术框架,而HBuilder是国内的H5工具开发公 司DCLOUD的产品.我自己先总结下吧:这两个技术框架在开发效率上基本上可以媲美WEB开发的速度,RN强调的是“Learn

React学习—组件

一.定义 组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. 二.组件的分类 1.函数式组件(无状态组件) 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等:这种通过多个简单然后合并成一个大应用的设计模式被提倡. function Welcome(props) { re

如何写好react组件

react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Create React App路由4.0的异步组件加载(Code Splitting) React进阶--使用高阶组件(Higher-order Components)优化你的代码 Higher-order Components 高阶组件 redux方面: Redux-saga 中文文档 https:

react Native如何实现跨平台

react Native是通过虚拟DOM实现跨平台,运行时 将虚拟DOM转换为相应的web编码.android编号.ios编码进行运行的.   代码实现: 01.html: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <script src="react.js"></script> 

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

React核心内容归纳总结

状态.属性.组件API.组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在constructor里写方法 constructor(props) { super(props); this.state = { liked: false }; this.handleClick = (e) => { this.setState({liked: !this.state.liked}); };

react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?

作者:元彦链接:https://www.zhihu.com/question/27602269/answer/40168594来源:知乎著作权归作者所有,转载请联系作者获得授权. 三者用途稍有不同,按依赖关系调整下顺序:1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选: var Hello = React.createClass({ render: function(

REACT 学习

1.React/React Native 的ES5 ES6写法对照表 http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 2.

菜鸟窝React Native 视频系列教程

菜鸟窝React Native 视频系列教程 交流QQ群:576089067 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU,后负责蜂鸟众包Android端,期间引入react-native技术,作为国内react-native 与 Android混合开发的早期商业项目,具有一定经验,同时也是react-native开源项目reading(https://github.com/attentiveness/reading)