前端框架react研究

简介: 摘要:      最近公司要做一个嵌套在app中的应用,考虑着用Facebook的react来开发view,所以就研究了下。下面是我在开发中遇到的坑,希望能给你帮助。 项目地址:https://github.com/baixuexiyang/react Issue:https://github.com/baixuexiyang/react/issues 欢迎star和fork! 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. 加载组件的首字母大写,比如:<HeaderComponent />
  2. 每一个组件的render最外层都要有一个包裹元素

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

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

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

  6. 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

 

相关文章
|
2天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
4天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
2天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
4天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
4天前
|
前端开发 JavaScript API
前端技术栈方向研究报告
前端技术栈方向研究报告
10 0
|
4天前
|
编解码 前端开发 JavaScript
前端技术发展趋势与应用研究
前端技术发展趋势与应用研究
30 0
|
4天前
|
开发框架 缓存 前端开发
|
4天前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
32 1
|
4天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
4天前
|
前端开发 JavaScript UED
使用React Hooks优化前端应用性能
本文将深入探讨如何使用React Hooks来优化前端应用的性能,重点介绍Hooks在状态管理、副作用处理和组件逻辑复用方面的应用。通过本文的指导,读者将了解到如何利用React Hooks提升前端应用的响应速度和用户体验。