美文网首页
总结一下React JS 从官方教程所学到的东东

总结一下React JS 从官方教程所学到的东东

作者: shiyuwudi | 来源:发表于2017-09-02 07:42 被阅读18次

1 id和class的区别:一个文档中id是唯一的,class可以有很多处。

2 getElementById:替换掉div里id为xxx的元素。

3 头两条好弱智,谁叫我之前对js一无所知……

4 marked(string, {sanitize: true}):用markdown格式化字符串。输出要用return {__html: markedString},并且要指定为dangerouslySetInnerHTML(在span中,这样不会被CSS格式化),否则React不会放行(是为了防止XSS攻击)。

5 this.props.children: 就是子节点。

6 注意数组中的每个自定义控件都要有自己的key,来作为排序的依照,否则会报错误->Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method ofCommentList。

7 Best Practice for how to format an array passed in: 最好的方法就是用map然后第一个参数放箭头函数。

8 说到箭头函数,它除了让代码更简练和易读,还有个好处就是会自动修正this的指向,如果用函数作为参数,则一定要手动指定(bind(this))。

9 getInitialState: 重写函数,顾名思义。用来return一个初始化的state,而react native不同,后者是直接在构造函数里指定。

10 在控制性控件的点击事件处理方法中,参数为事件event,有点类似iOS中的target, action模式,event.target就是发出事件的控件,如。event.target.value就可以取出这个input的值。调用event.preventDefault就可以避免这个控件在浏览器里默认的行为。

$.ajax(map): ajax网络请求,使用实例:

$.ajax({

url:this.props.url,

dataType:'json',

type:'POST',

data:yourData,

success:data=>{this.setState({data:data})},

error:(xhr,status,err)=>

{

this.setState({data:comments});

console.error(this.props.url,status,err.toString())

}

});

ajax轮询最佳实践:在componentDidMount中先请求一次,然后再开始轮询。

ReactDOM.render(component, element): 每个js文件的主渲染函数。

注意:

11 JSX语法中React控件的变量要和html的标签字符串区分开,前者首字符大写,而后者小写。比如class这种JS中的关键字,为了在JSX中不至于混淆,后者换成className,还有一些其他类似的例子要注意。

12 吐槽一下网上ReactJS教材也太少了,京东一搜react出来的全是他小弟react native,起源reactJS不讲,直奔native主题,开门见山的功夫让人汗颜。

相关文章

  • 总结一下React JS 从官方教程所学到的东东

    1 id和class的区别:一个文档中id是唯一的,class可以有很多处。 2 getElementById:替...

  • RN基础

    中文官方文档 React-Native项目在Android真机上调试 Node.js教程 React Native...

  • React Native学习(三)---完成Hello Worl

    官方教程React Native 中文网阮一峰的ECMAScript 6 入门 将工程中app.js修改为如下保存...

  • React 总结 - 基础篇

    React编写简书项目 这是看慕课网上的React课程做的总结笔记 MDN上的js教程 基础需打牢重新介绍 Jav...

  • React 与 React Native

    01 - 关于React React.js 通常简称为 ReactFacebook 官方对 React 的定义: ...

  • 充电站

    一、前端 ES6教程-菜鸟教程 React官方文档-中文 Vue官方文档-中文 Antd UI组件官方文档 ECh...

  • React-Route相关

    官方教程 react-route官方教程非常完善,而且一步一步,通俗易懂,入门可以参看官方教程https://gi...

  • 想学React.JS的伙伴看过来,React.JS入门教程包学会

    想学React.JS的伙伴看过来,React.JS入门教程包学会!防治教程泛滥我设置成为付费文章,有需要的购买获取...

  • react的基本语法

    react 官方推荐使用 一种JSX语法,类似xmlreact.js 引入的时候放在react-dom.js的前面...

  • 2020-03-12

    React Router教程 React项目的可用的路由库是 React-Router ,当然这也是官方支持的。它...

网友评论

      本文标题:总结一下React JS 从官方教程所学到的东东

      本文链接:https://www.haomeiwen.com/subject/hkuljxtx.html