前端框架react研究

简介: 前端框架react研究

摘要:


   

最近公司要做一个嵌套在app中的应用,考虑着用Facebook的react来开发view,所以就研究了下。下面是我在开发中遇到的坑,希望能给你帮助。


项目地址:https://github.com/baixuexiyang/react


Issue:https://github.com/baixuexiyang/react/issues


欢迎star和fork!


react优势:



  • 仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。
  • 数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。
  • React 都是关于构建可复用的组件,使代码复用、测试和关注分离(separation of concerns)更加简单。


注意点:



  1. 加载组件的首字母大写,比如:


  1. 每一个组件的render最外层都要有一个包裹元素

  2. this.props不能修改,this.state可以修改

  3. 页面oclick事件在ios中的Safari不起效果,onClick={this.detail.bind(this, item)} 需要使用其他方式,比如jQuery的绑定事件

  4. string转换成html,dangerouslySetInnerHTML={{__html: ''}}

  5. getInitialState:在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
    getDefaultProps:在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性)。该方法在任何实例创建之前调用,因此不能依赖于 this.props。另外,getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。


组件的生命周期:


  

componentWillMount:

    

服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。

  

componentDidMount:

    

在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。

  

componentWillReceiveProps:

    

在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。

  

shouldComponentUpdate:

    

在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。


如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

  

componentWillUpdate:

    

在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。

  

componentDidUpdate:

    

在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

  

componentWillUnmount:

    

在组件从 DOM 中移除的时候立刻被调用。

 

 

小结:

  使用react开发,所有html都写在js文件里,所以开发起来不是很顺畅。推荐一个chrome插件:React Developer Tools

相关文章
|
8天前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2天前
|
JavaScript 前端开发
React与Vue性能对比:两大前端框架的性能
React与Vue性能对比:两大前端框架的性能
|
2天前
|
前端开发 JavaScript
前端框架React原理
前端框架React原理
9 0
|
7天前
|
存储 前端开发 JavaScript
探索前端框架React Hooks的魅力
【2月更文挑战第2天】本文深入探讨了前端框架React Hooks的核心概念及其在现代Web开发中的重要性,分析了Hooks相较于传统class组件的优势所在,展示了它带来的便利和灵活性,为开发者提供了更加高效和优雅的解决方案。
|
7天前
|
前端开发 JavaScript C++
探讨前端框架选择:React vs Angular vs Vue
【2月更文挑战第2天】 在当今快速发展的前端开发领域,选择合适的前端框架至关重要。本文将深入探讨三大热门前端框架:React、Angular和Vue,分析它们的特点、优势和劣势,帮助开发者更好地理解并选择适合自己项目的前端框架。
11 3
|
10天前
|
前端开发
《深入理解前端框架React Hooks的原理与实践》
本文将深入探讨前端框架React中Hooks的原理及其实际应用,帮助读者更好地理解React Hooks的工作机制,并通过示例代码展示如何利用Hooks来提升前端开发效率和代码质量。
11 0
|
6月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
82 0
|
6月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
55 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
6月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
51 0
|
6月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
28 0

相关产品

  • 云迁移中心