博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react 学习记录(四)
阅读量:6603 次
发布时间:2019-06-24

本文共 1899 字,大约阅读时间需要 6 分钟。

hot3.png

写在前面

新的一周,夜晚开始新的学习。

咦~貌似这周从昨天就开始了 /(ㄒoㄒ)/~~

demo11

getInitialState 初始化State

return对象即为State,包含所有会动的属性

componentDidMount 生命周期插入dom之后执行

里面jq ajax 还是引入的jq   <script src="../build/jquery.min.js"></script>

ps:React 本身没有任何依赖

.bind(this) 这种异步的方法实际里面的的匿名函数调用的都是window,用bind(this)就可以把外面的this传进去

回调关键在于改变this.setState

demo12

Promise对象是啥。。。??蒙蔽脸

promise 英[ˈprɒmɪs] 美[ˈprɑ:mɪs]
vt. 允诺,许诺; 给人以…的指望或希望;
vi. 许诺; 有指望,有前途;
n. 许诺; 希望,指望; 允诺的东西;

 

一个ES6定义的新对象

var promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolve(value); } else { reject(error); }});promise.then(function(value) { // success}, function(value) { // failure});作者:流星狂飙链接:http://www.jianshu.com/p/063f7e490e9a來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

然后在例子中是用箭头函数写的

  componentDidMount() {

    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

 

value => this.setState({loading: false, data: value}),

相当于

function(value){

    return this.setState({loading: false, data: value});

}

function(value){

    this.setState({loading: false, data: value});

}.bind(this)

ps1:虽然没有要求return的说,这里如果没有return也是正常的,因为只要执行了this.setState(。。。)就会重新刷新render

ps2;这里还发现一个箭头函数的好处实际箭头函数会保持上下文不发生改变,如果我们要确切的相等要加上一个.bind(this)

补充

jq中map

$("p").append( $("input").map(function(){  return $(this).val();}).get().join(", ") );
.map(callback(index,domElement))

map第一个是索引,第二个参数才是项

 

而例子中用的map是属于jsx中的map

文档原文

JSX allows  in curly braces so we could inline the map() result

改写了下样例代码

function ListItem(props) {  return 
  • {props.number}{props.index}
  • ;}function NumberList(props) { const numbers = props.numbers; return (
      {numbers.map((number,index) =>
      )}
    );}const numbers = ['a','b','c','d','e'];ReactDOM.render(
    , document.getElementById('root'));

    发现jsx中也是第一个为项,第二个为索引。。!!

    demo13

    睡觉觉zzz

    转载于:https://my.oschina.net/u/2367690/blog/1563495

    你可能感兴趣的文章
    js中的scrollTop、offsetTop、clientTop
    查看>>
    11-border(边框)
    查看>>
    4.字符串(2-6/2-7)
    查看>>
    bugfree3.0.1-邮件配置
    查看>>
    ASP.Net MVC View(视图)
    查看>>
    有关git clone 下载速度变慢的解决方法
    查看>>
    Papervision3D Essentials中文版,附Papervision3D_2.1.920.swc和章节练习源码
    查看>>
    Mysql汉字乱码的解决
    查看>>
    FMDB增删改查小Demo
    查看>>
    UNIX网络编程卷2 源码编译篇
    查看>>
    (一)认识Sass和Compass
    查看>>
    哈尔滨理工大学第七届程序设计竞赛决赛(网络赛-高年级组)C - 小明打联盟...
    查看>>
    POJ 1930 Dead Fraction
    查看>>
    PAT (Advanced Level) 1028. List Sorting (25)
    查看>>
    获取oracle数据库对象定义
    查看>>
    【摘】人生苦短, 每日python
    查看>>
    学习、摘录、目标——学习任务
    查看>>
    Java内存划分
    查看>>
    隐藏input的光标
    查看>>
    POJ-4001(3入口のBFS)
    查看>>