技术文档

原文链接：React项目详解GITHUB：react-webpack-config持续更新…React项目指导使用webpack需要安装的依赖webpack，webpack-cli，react，react-dombabel-loader，@babel/core，@babel/preset-env，@babel/preset-react设置.babelrc，{“presets”: ["@babel/preset-env","@babel/preset-react"]}设置scripts： “dev”: “webpack –mode development”, “build”: “webpack –mode production"设置webpack-dev-server：devServer: { compress: true, port: 9000， hot: true},“start”: “webpack-dev-server –config webpack.config.js” 设置performance：performance: { hints: false}Component基本组件let title = <h1>Hello, world!</h1>ReactDOM.render(title,document.getElementById(‘root’))动态组件import React from ‘react’;import ReactDOM from ‘react-dom’;let displayTime = () => { let nowTime = ( <div> <span>现在时间：{new Date().toLocaleTimeString()}</span> </div> ); ReactDOM.render(t nowTime, document.getElementById(‘root’) );};setInterval(displayTime, 1000);class组件构建器import React, {Component} from ‘react’;import ReactDOM from ‘react-dom’;class HelloTitle extends Component { render() { return <h1>Hello,World!</h1> }}ReactDOM.render( <HelloTitle/>, document.getElementById(‘root’));props属性import React, {Component} from ‘react’;import ReactDOM from ‘react-dom’;class HelloTitle extends Component { render() { return <h1>Hello,{this.props.name}!</h1> }}let titleDiv = ( <div> <HelloTitle name=“React”/> <HelloTitle name=“World”/> </div>);ReactDOM.render( titleDiv, document.getElementById(‘root’));props多层使用import React, {Component} from ‘react’;import ReactDOM from ‘react-dom’;class HelloTitle extends Component { render() { return <h1>Hello,{this.props.name}!</h1> }}class HelloDiv extends Component { render() { return <div><HelloTitle name={this.props.name}/></div> }}ReactDOM.render( <HelloDiv name=“React”/>, document.getElementById(‘root’));组件复用import React, {Component} from ‘react’;import ReactDOM from ‘react-dom’;class HelloTitle extends Component { render() { return <h1 style={this.props.style}>{this.props.content}</h1> }}class HelloDiv extends Component { render() { return <div> <HelloTitle content=“比较大的字” style={{‘fontSize’: 18}}/> <HelloTitle content=“比较小的字” style={{‘fontSize’: 12}}/> </div> }}ReactDOM.render( <HelloDiv/>, document.getElementById(‘root’));Component的状态state和生命周期state属性constructor(props) { super(props); this.state = { time: new Date().toLocaleTimeString() }}render() { return <h1>现在时间是{this.state.time}</h1>}组件构建完成后先执行的动作，componentDidMount()：componentDidMount() { let upTime = () => { this.setState({time: new Date().toLocaleTimeString()}) }; setInterval(upTime, 1000)}setState()修改状态值this.setState({time: new Date().toLocaleTimeString()}) ...

你好，2019再见，2018又到了一年辞旧迎新的时候，大家应该也和美美一样，在忙着总结回顾和展望规划吧。按老惯例，我们该献上技术年货了。今年首先出场的，是我们的技术沙龙大套餐！美团技术沙龙是由美团技术团队和美团科协主办的线下技术活动，每期沙龙邀请美团和同行公司的技术专家分享来自一线的实践经验，覆盖前端、后台、系统、数据、算法、测试、运维等技术领域。目前已在北京、上海、厦门、成都等城市成功举办了48期，吸引了超过2万名工程师报名参会。除了现场亲密交流之外，大家还在会后继续进微信群里切磋问道。我们同时也定期举办线上沙龙，有更多的朋友已经在线收听或收看过我们的直播。过去的一年里，我们一共举办了19场线下沙龙，16次线上沙龙，包括99位讲师，85个演讲，70+小时分享。除美团的几十位专家之外，还邀请了腾讯、蚂蚁金服、百度、京东、去哪儿、美亚柏科同行。主题既有最火的AI热点——深度学习、强化学习、知识图谱，新潮技术Go、Kotlin、Flutter的落地实践，也有大规模互联网平台不可或缺的稳定性保障、高可用架构、监控体系、持续集成，还有接地气的运营系统、数据平台、配送调度的经验，更少不了CAT、mpvue、EasyReact这些火爆的开源项目……我们整理了今年所有线上线下沙龙的演讲稿和视频，分享给大家，希望能帮助大家在技术之路上继续追求卓越。还没有关注美团技术团队公众号（meituantech）的同学，赶快关注哟。现在，大家请闭眼，大餐来了～～～美团线下沙龙任意点击标题，就能直接查看视频及演讲稿Tech Salon 048：AI在复杂业务场景中的应用（请在微信端打开）出品人|何仁清 美团研究员 2018/12/22《深度强化学习技术在智能调度中的应用》王超@美团高级技术专家《深度学习在物流配送舆情监控中的应用》李超@京东物流NLP方向资深算法工程师《美团搜索中的深度学习实践》周翔@美团技术专家Tech Salon 047：运营效率系统架构演进之道（请在微信端打开）出品人|阳纯飞 美团高级技术专家 2018/12/08《面向O2O大促活动的高效运营系统实践》李力@美团高级技术专家《京东物流实时数据平台性能优化实践》杨国斌@京东技术专家《外卖商家菜品运营效率提升实践》罗震@美团高级技术专家《外卖商户数据化运营体系建设》李觊@美团高级技术专家Tech Salon 046：AI在外卖配送的应用（请在微信端打开）出品人|王兴星&郝井华 美团研究员 2018/11/25《预估模型在外卖广告的演进》谢乾龙@美团外卖广告算法专家《即时配送中的运筹优化技术》郝井华@美团配送智能调度平台负责人《即时配送中的机器学习技术》何仁清@美团配送AI方向负责人Tech Salon 045：如何构建高性能、稳定的后端服务系统（请在微信端打开）出品人 |方建平 美团技术总监 2018/11/24《美团度假交易稳定性建设实践》韩建起@美团技术专家《美团配送智能调度系统架构演进》郑伟@美团技术专家《美团稳定性保障平台Rhino》占军@美团技术专家《美团外卖LBS服务实践》易奎@美团高级技术专家Tech Salon 044：千万级日活App的质量保证（请在微信端打开）出品人|李永刚 美团研究员 2018/09/15《AI语音产品测试》于海生@美团技术专家《美团外卖客户端 UI 自动化测试实践》刘健@美团技术专家《客户端QA效率工具》赵晔@美团测试开发架构师Tech Salon 043：美团金融千万级交易系统质量保障之路（请在微信端打开）出品人|赫大龙 美团高级技术专家 2018/09/01《智能支付稳定性测试实战》范勋伟@美团高级测试开发工程师《去哪儿网服务端自动化测试体系》郑希文@去哪儿《线上支付SDK质量保证体系》张朋飞@美团高级测试开发工程师《质量运营演变之道》符欣@美团高级开发工程师Tech Salon 042：高效率前端与架构实战（请在微信端打开）出品人|王鹤 美团高级技术专家 2018/08/26《EH — 用黑科技打造全新的 Hybrid 体验》 陈禹霖@美团技术专家《mpvue小程序开发框架和最佳实践》胡成全@美团技术专家《美团金融前端工程化最佳实践》田泱@美团高级研发工程师《前端架构师应该做的事——架构模型与技术实践》王鹤@美团高级技术专家Tech Salon 041：企业级前端开发360°实践（请在微信端打开）出品人|任远 美团高级技术专家 2018/08/18《浅谈流量劫持与防治》刘洋河@美团高级工程师《前端高可用性保障实践》田泱@美团高级研发工程师《跨容器高性能的离线化方案在美团的实践和探索》龙佳文@美团高级工程师《前端遇上Go: 静态资源增量更新的新实践》杨义天@美团高级工程师Tech Salon 040：前端遇上黑科技，打造全新界面体验与效率（请在微信端打开）出品人 | 冯湧 美团研发总监 2018/08/04《EH——用黑科技打造的全新的 Hybrid 体验》陈禹霖@美团技术专家《Vix——如何打造一个高效的前端组件库》张胜@美团高级研发工程师《委以重任的Node.js——百亿级访问实践》迪波威@百度资深软件工程师《构建时预渲染——网页首帧优化实践》尚寒阳@美团资深研发工程师Tech Salon 039：新思路打造移动端高效研发体系（请在微信端打开）出品人|周辉 美团资深架构师 2018/07/21《Picasso在大众点评首页的应用》虞惠文@美团Android开发工程师《移动前后端开发解耦》林晨@美团后端技术专家《打造稳定、灵活、高效的运营配置平台》蒋国宝@美团后端技术架构师《移动持续集成实践》何智聪@美团iOS技术专家Tech Salon 038：旅游电商架构攻略指南（请在微信端打开）出品人|金孟哲 美团高级技术专家 2018/07/07《旅游度假预订系统架构演进实践》 金孟哲@美团高级技术专家《旅游度假多要素动态打包实践》 王超@美团高级技术专家《旅游度假商品中心架构演进》 徐泼@美团高级技术专家《直连低可信系统，实现高可用服务实践》 郑旭@美团高级技术专家Tech Salon 037：美团外卖两千万日订单背后的客户端技术架构（请在微信端打开）出品人|吴凯 美团高级技术专家 2018/06/23《美团外卖客户端技术架构演进》朱瑞利@美团资深工程师《客户端监控体系建设》冯天锡@美团资深工程师《客户端多端复用架构》郑金光@美团高级工程师《客户端容灾能力体系》李富强@美团资深工程师Tech Salon 036：大前端的动态化与可用性建设（请在微信端打开）出品人|洪磊 美团研究员 2018/06/02《大前端高可用性建设》李富强@美团资深前端工程师《React fiber漫谈》覃俊文@蚂蚁金服前端技术专家《小程序开发的新姿势 -mpvue 的应用和实践》胡成全@美团前端技术专家《ReactNative性能优化企业级应用》赵宏罡@腾讯资深前端开发工程师Tech Salon 035：前端热点技术的企业级实践（请在微信端打开）出品人|任远 美团高级技术专家 2018/04/21《前端遇上 Go——静态资源增量更新的新实践》刘洋河@美团高级前端工程师《金融扫码付 H5 迁移小程序拓荒之旅》陈瑶@美团前端工程师《小程序开发的新姿势 - mpvue 开发框架和最佳实践》胡成全@美团技术专家Tech Salon 034：聊聊酒店系统高可用架构实践（请在微信端打开）出品人|许关飞 美团研究员 2018/04/14《高可用之中间件技术》吴湘@美团技术专家《分布式开源监控系统CAT在美团点评演进》尤勇@美团研究员《美团旅行住宿产品中心系统高可用实战》槐国涛@美团酒店CRS商品负责人《美团旅行酒店住宿订单系统高可用实战》李磊@美团资深工程师《美团旅行直连系统高可用实战》秦浏杰@美团资深工程师Tech Salon 033：企业信息化建设和安全管理（请在微信端打开）出品人|邓昀泽 美团企业平台研发负责人 2018/02/03《美团点评内部系统构建之路》邓昀泽@美团企业平台研发部负责人《企业信息防护体系建设》陆平@美亚柏科企业电子数据取证事业部副总《企业如何应对安全威胁》游兴旺@美团企业平台研发高级总监Tech Salon 032：移动开发热点技术—动态日志、监控、Hybrid、插件化（请在微信端打开）出品人|方锦涛 美团研究员 2018/02/03《线上问题排查体系构建：动态日志》 陈潼@美团Android资深工程师《混合应用工程化实践》 李罡@美团前端工程师《Caesium iOS启动时间监控》 吴君阳@美团iOS工程师Tech Salon 031：线下支付千万级订单服务—前后端架构实践（请在微信端打开）出品人|任远 美团高级技术专家 2018/01/27《扫码付前端可用性保障实践》 田泱@美团高级工程师《业务系统的建设之路》刘运@美团技术专家《Web离线化加载》 于秋@美团技术专家《基于WTL框架的Windows开发最佳实践》 钱声鹏@美团高级工程师Tech Salon 030：餐饮生态高可用系统实践（请在微信端打开）出品人|温华剑 美团技术专家 2018/01/13《从“0”开始-美团收银客户端》聂龙羽@美团技术专家 《美团餐饮生态大数据架构实践》牛江浩@美团技术专家《餐饮开放平台的高可用实践》朱洋波@美团技术专家美团线上沙龙任意点击标题，就能在线观看视频或者文章On-Line Salon 33：美团大脑 智享生活分享人：王仲远 美团点评高级研究员On-Line Salon 32：基于深度学习的计算机视觉技术在无人驾驶中的应用分享人：刘宇达 美团点评资深算法工程师On-Line Salon 31：利用响应式来解决客户端问题分享人：臧成威 美团点评前端技术专家On-Line Salon 30：美团针对 Redis Rehash 机制的探索和实践分享人：葛春林 美团点评资深工程师On-Line Salon 29：Flutter 原理与实践分享人：李少杰 美团点评资深工程师On-Line Salon 28：如何基于深度学习实现图像的智能审核分享人：魏晓明 美团点评高级技术专家On-Line Salon 27：美团客户端响应式框架 EasyReact 开源分享人：臧成威 美团点评前端技术专家On-Line Salon 26：移动持续集成在大众点评的实践分享人：何智聪、邢轶 美团点评前端技术专家On-Line Salon 25：Kotlin 代码检查探索与实践分享人：周佳 美团点评前端开发工程师On-Line Salon 24：静态资源增量更新的新实践分享人：刘洋河 美团点评资深工程师On-Line Salon 23：点评侧用户行为检索系统分享人：朱凯 美团点评资深工程师On-Line Salon 22：深度学习在美团搜索广告排序的应用实践分享人：薛欢、梁玉林、王新 美团点评资深工程师On-Line Salon 21：使用 Mpvue 开发微信小程序的最佳实践分享人：胡成全 美团点评前端技术专家On-Line Salon 20：亿级用户个性化品类推荐实战解析分享人：张晓宇 美团高级工程师On-Line Salon 19：MVVM 在美团点评酒旅业务中的实践分享人：吴卓 美团点评技术专家On-Line Salon 18：深度学习在美团点评推荐业务中实践分享人：陈文石 美团点评算法专家感恩！99位出品人和讲师，70+小时的分享，感谢他们给我们带来一线的技术实践分享，感谢他们给我们2万多小伙伴送上技术的“饕餮盛宴”。除了美团技术团队的讲师们，我们还要特别感谢来自腾讯、蚂蚁金服、百度、京东、去哪儿、美亚柏科等公司的讲师们，感谢你们的付出和努力，我们期待新的一年会有更多的合作！（2018全年出品人及讲师）———- END ———- ...