2018 react 大会_React Conf 2018的经验教训
2018 react 大会
by Yangshun Tay
阳顺泰
React Conf 2018的经验教训 (Lessons Learned at React Conf 2018)
I was fortunate to have attended React Conf 2018 thanks to my managers — it was an awesome event. I have been watching past React Conf videos online and it was exciting to be able to attend the event and listen to some of the best people in the industry live!
感谢我的经理们，我很幸运参加了React Conf 2018 –这是一个了不起的活动。 我一直在网上观看过React Conf的过去视频，很高兴能够参加此次活动并现场听取业内一些最出色的人物！
React Conf is a two-day event with over 20 speakers on stage. Here’s a summary of the highlights, so that people who weren’t able to attend would learn from my experience and quickly decide if it’s worth their time to watch the full video, which can be found on YouTube.
React Conf是一个为期两天的活动，舞台上有20多位演讲者。 这里是重点摘要的摘要，以便那些无法参加的人们可以从我的经验中学到并Swift决定是否值得花时间观看完整的视频(可在YouTube上找到)。
向功能组件添加状态并通过React Hooks重用生命周期逻辑 (Add State to Functional Components and Reuse Lifecycle Logic with React Hooks)
The conference kicked off with a keynote from Sophie Alpert, Engineering Manager of the React Team at Facebook (at that point in time) and Dan Abramov, core team member of React and creator of Redux. Sophie started the presentation with an interesting trivia that on Google trends, React is also more popular than renewable energy and orange juice!
会议的开幕词来自Facebook React团队的工程经理Sophie Alpert(当时)以及React的核心团队成员和Redux的创建者Dan Abramov。 索菲(Sophie)以有趣的琐事开始了演讲，在Google趋势上，React比可再生能源和橙汁还受欢迎！
She then reiterated that since React started in 2013, its mission was to make it easier to build great user interfaces. React tries to simplify things which are hard to do, such as simplifying component’s async data dependencies with suspense and better rendering performance with time slicing, which makes sure that React processes the most important renders in your app first.
然后她重申，自从React在2013年开始以来，它的使命是使构建出色的用户界面变得更加容易。 React试图简化难以完成的事情，例如，通过暂停来简化组件的异步数据依赖关系，并通过时间分片来改善渲染性能，从而确保React首先处理您应用中最重要的渲染。
Another thing that React does well is to have great developer experience and tooling while you develop and debug your app via the React Devtools extension, which recently added a profiler feature to help developers understand what is happening in the app.
React擅长的另一件事是在您通过React Devtools扩展程序开发和调试应用程序时拥有出色的开发人员经验和工具，该扩展程序最近添加了探查器功能以帮助开发人员了解应用程序中发生的事情。
Some things in React were still not ideal — reusing logic between multiple components has traditionally been done using Higher Order Components and render props. They solve the problem but it comes with a disadvantage to developers who have to restructure code. This could lead to Wrapper hell and makes data flow through the app hard to follow.
React中的某些事情仍然不理想-在多个组件之间重用逻辑传统上是使用高阶组件和渲染道具来完成的。 他们解决了问题，但对必须重组代码的开发人员来说是不利的。 这可能会导致包装器陷入困境，并使通过应用程序的数据流难以追踪。
The second issue is that in giant components, the logic can sometimes be tangled and split across various life-cycle methods, such as subscribing to a store in componentDidMount and unsubscribing in componentWillUnmount.
第二个问题是，在大型组件中，有时可能会纠结逻辑并将其拆分为各种生命周期方法，例如，在componentDidMount订阅存储，而在componentWillUnmount取消订阅。
Splitting up logic tends to lead to situations where you forget to clean up after mounting which could cause memory leaks. The last issue is classes. Function components often have to be converted to classes to use state and life-cycle methods and boilerplate would have to be added to support them. Usage of this and binding callbacks can also be confusing.
逻辑拆分会导致安装后忘记清理，可能导致内存泄漏。 最后一个问题是类。 通常必须将功能组件转换为类以使用状态和生命周期方法，并且必须添加样板来支持它们。 this用法和绑定回调的用法也可能造成混淆。
The React team has a proposal to the above three issues — React Hooks.
React团队对以上三个问题(React Hooks)提出了一个建议。
Dan Abramov then took the stage! React uses a Request for Comments, RFC, process whenever somebody wants to make substantial additions or changes to React and a proposal would have to be written, detailing the motivation and design of the change. The proposal for React Hooks can be found here. It should be noted that Hooks do not contain any breaking changes or deprecation and its usage is opt-in.
丹·阿布拉莫夫上台了！ 每当有人要对React进行实质性添加或更改时，React都会使用RFC征询流程，并且必须编写提案，详细说明更改的动机和设计。 React Hooks的建议可以在这里找到。 应当注意，Hooks不包含任何重大更改或弃用，并且它的用法是可选的。
Dan gave a demo of how to convert a typical class component with state to use functional components using a few new React Hook APIs — useState, useEffect and useContext and the benefits are obvious. We are able to co-locate life-cycle logic within a useEffect hook and can reuse them across components. This sparked a movement of the community creating npm packages of useful hooks and they can be found here.
Dan演示了如何使用一些新的React Hook API( useState ， useEffect和useContext将具有状态的典型类组件转换为使用功能组件的useContext ，其好处显而易见。 我们能够在useEffect挂钩中共同定位生命周期逻辑，并可以在组件之间重用它们。 这引发了社区的运动，创建了有用的钩子的npm软件包，可以在这里找到它们。
Using Hooks come with a few caveats — you cannot call hooks within a conditions, they have to be at the top level of your functional component and there’s a linter plugin which warns you if you are not using hooks correctly.
使用Hook会带来一些警告 -您不能在条件内调用Hook，它们必须位于功能组件的顶层，并且有一个linter插件会警告您是否使用了错误的钩。
This is because React relies on the order of execution of hooks to match the state values with the hooks. You can only use hooks within functional components or other custom hooks (which by convention should start with use).
这是因为React依赖于挂钩的执行顺序来将状态值与挂钩匹配。 您只能在功能组件内使用挂钩或其他自定义挂钩(按照惯例，它们应以use开头)。
Facebook has been using hooks in production for about four months now so behavior is relatively stable. Hooks can coexist with your existing code and you can start using them today and gradually migrate your non-hooks code to use hooks.
Facebook在生产中使用钩子已有四个月了，因此行为相对稳定。 挂钩可以与您现有的代码共存，您可以从今天开始使用它们，并逐渐迁移非挂钩代码以使用挂钩。
Ryan Florence, creator of React Router then gave a demo on how to refactor some real world use cases to use hooks. Ryan first talked about how render props give components a false sense of hierarchy in situations like a <Media> component that is used for querying responsive screen sizes then refactored a component using two <Media> components with render props using a useMedia hook he created on-the-spot.
然后，React Router的创建者Ryan Florence演示了如何重构一些实际用例以使用钩子的演示。 莱恩第一谈到了如何呈现道具给组件的层次结构的错觉在像情况一<Med IA>是用于查询响应的屏幕尺寸然后重构的成分全光照组分g two & LT;媒体>与渲染PR部件ops usinガ他在现场创建的useMedia挂钩。
The next demo was about refactoring/creating an accessible carousel with all the essential features — a play/stop button, forward/back button and a progress bar.
下一个演示是关于重构/创建具有所有基本功能的可访问轮播-播放/停止按钮，前进/后退按钮和进度条。
The useEffect hook was introduced in greater detail here and how they can be run only when certain state/props have changed, things you'd do in componentDidUpdate. useEffect can be used to achieve the same things as what you need componentDidMount, componentDidUpdate and componentWillUnmount for.
此处详细介绍了useEffect挂钩，以及如何仅在某些状态/道具已更改时如何运行它们，这是您在componentDidUpdate要做的。 useEffect可用于实现与所需的相同的componentDidMount ， componentDidUpdate和componentWillUnmount 。
Lastly, Ryan also demonstrated how you could take a Flux/Redux-like uni-directional data approach in your app by using the useReducer hook. The useReducer hooks returns two variables, state and dispatch.
最后，Ryan还演示了如何使用useReducer挂钩在应用程序中采用类似Flux / Redux的单向数据方法。 useReducer挂钩返回两个变量state和dispatch 。
Like in Redux, the reduce function you provide to useReducer will take in the current state and an action as parameters and produce a new state depending on the action passed in.
像在Redux中一样，您提供给useReducer的reduce函数将采用当前状态和一个动作作为参数，并根据传入的动作产生一个新状态。
I recommend that you check out his entertaining and enlightening video demo. The code for his live demo can also be found in his GitHub repo.
我建议您查看他的娱乐性和启发性视频演示。 他的现场演示的代码也可以在他的GitHub存储库中找到。
P.S. I also learnt that changing keys of a components reset its state, because changing keys will unmount and remount a component. Pretty handy tip!
PS我还了解到，更改组件的键会重置其状态，因为更改键会卸载并重新安装组件。 非常方便的提示！
影片连结 (Video Links)
通过React中的并发渲染改善用户体验和开发人员幸福感 (Improve User Experience and Developer Happiness with Concurrent Rendering in React)
Day 2 of the conference was kicked off by Andrew Clark and Brian Vaughn. When developing, it’s not unusual to degrade user experience in the process of making our app faster. Andrew gives an example of Ads Manager as one of such apps, because of the sheer number of spinners in the creation flow as a result of codesplitting of components or data fetching. These spinners also show up only for a split second because the data does not take long to load on a fast network.
会议的第二天由安德鲁·克拉克和布莱恩·沃恩拉开序幕。 在开发时，在使我们的应用程序更快的过程中降低用户体验并不罕见。 安德鲁(Andrew)给出了一个广告管理器(Ads Manager)作为此类应用程序的例子 ，这是由于组件的代码拆分或数据提取导致创建流程中的微调器数量众多。 这些微调器也只显示一秒钟，因为数据不需要很长时间就能加载到快速网络上。
Over the past year, the React team has been working on concurrent React, which aims to make it easy for developers to build high-performance apps by default with smooth non-janky user experience.
在过去的一年中，React团队一直在研究并发React，其目的是使开发人员在默认情况下可以轻松构建具有非垃圾用户体验的高性能应用程序。
Concurrent React (previously called Async React) allows React to work on multiple things at once and switch between them according to their priority. Today, React still works synchronously. If a component requires a long time to update, the main thread will be blocked and the browser cannot respond to user inputs until the work is complete. With concurrent React, that work can be paused, and the main thread can respond to the user input, then resume work. This is also referred to as time slicing, the ability to split work into chunks and spread its execution over time.
并发React(以前称为Async React)允许React一次处理多个事物，并根据它们的优先级在它们之间切换。 今天，React仍然可以同步工作。 如果组件需要很长时间才能更新，则主线程将被阻塞，浏览器将无法响应用户输入，直到工作完成。 使用并发的React，可以暂停工作，并且主线程可以响应用户输入，然后继续工作。 这也称为时间分片，即将工作拆分为多个块并随时间推移扩展其执行的能力。
Andrew then uses an app comprising of three tabs as an example. With React.lazy, it's easy to code split the app and load the component within each tab only when it's being rendered. React also comes with a <Suspense> component to allow developers to render fallbacks when the component code isn't loaded yet.
然后，安德鲁以一个包含三个标签的应用为例。 使用React.lazy ，很容易编写代码拆分应用程序，并仅在呈现每个选项卡时才将其加载到每个选项卡中。 React还带有<Suspen se>组件，允许开发人员在尚未加载组件代码时呈现后备。
These components can be placed anywhere in the component tree and if any part of the tree hasn't been loaded, the fallback of the nearest <Suspense>component will be used. The above features work in synchronous mode and don't require any concurrent React features. One problem mentioned earlier is that if a resource loads fast, there's a flashing spinner. With concurrent React, these unnecessary flashing spinners can be avoided as you can configure the threshold that you are willing to wait before showing the fallback spinner.
这些组件可以放置在组件树中的任何位置，并且如果树的任何部分尚未加载，将使用最近的<Suspen se>组件的后备。 以上功能在同步模式下工作，不需要任何并发的React功能。 前面提到的一个问题是，如果资源加载速度很快，则有一个闪烁的微调框。 使用并发的React，可以避免这些不必要的闪烁微调器，因为您可以配置在显示后备微调器之前愿意等待的阈值。
One last thing Andrew showed was how easy it was to pre-load and pre-render the content in the other tabs during the idle time that the user spends reading the contents of the first tab after its loaded. Simply pass a hidden props to a HTML element and React will deprioritize all of its children to off-screen priority and only load them when there's nothing else to do on the page. When navigating to the other tabs, they appear instantly, because they have already been loaded during the idle time.
Andrew展示的最后一件事是，在用户闲置时间中，在第一个选项卡加载后花费时间阅读它们之前，在其他选项卡中预加载和预呈现内容是多么容易。 只需将hidden props传递给HTML元素，React就会将其所有子级的优先级降低到屏幕外的优先级，并且仅在页面上无其他操作时才加载它们。 导航到其他选项卡时，它们会立即显示，因为它们已在空闲时间加载。
Brian Vaughn then demonstrated a new profiling tool built into the React Devtool (it’s already in your browser) and a new profiling API. The profile works in a similar way to the Chrome performance profile, you record some interactions and can view the rendering duration and flame graphs of which components were rendered.
Brian Vaughn随后演示了React Devtool中内置的新配置工具(已在您的浏览器中)和新的配置API。 该配置文件的工作方式与Chrome性能配置文件的工作方式类似，您可以记录一些互动并可以查看渲染持续时间和渲染了哪些组件的火焰图。
This helps with debugging unnecessary re-renders and detecting components with slow renders. Performance information can also be attributed to events in the code by using the experimental scheduler’s trace API. Note that this API is not yet finalized, so use with caution. Find out more about React’s new interaction tracing feature here.
这有助于调试不必要的重新渲染和检测渲染缓慢的组件。 使用实验性调度程序的跟踪API，性能信息也可以归因于代码中的事件。 请注意，此API尚未最终确定，因此请谨慎使用。 在此处了解有关React新的交互跟踪功能的更多信息。
Jared Palmer, lead engineer at Palmer HQ, gave a demo on how he improved the user experience of his Spotify-clone (aptly name Suspensify) by using the new concurrent React features. React cache can not only be used to cache API response data, it can also be used to cache assets such as images, audio files, and scripts.
Palmer HQ的首席工程师Jared Palmer演示了如何使用新的并发React功能改善Spotify克隆(适当名称为Suspensify)的用户体验。 React缓存不仅可以用于缓存API响应数据，还可以用于缓存资产，例如图像，音频文件和脚本。
Jared showed how he leveraged on the unstable_createResource API and <Suspense /> to show a low resolution placeholder artist profile photo image as a placeholder while the higher resolution image is being downloaded in the background then displaying the higher resolution image after it's done downloading. Data loaded using the unstable_createResource API also reads more easily because developers no longer have to explicitly handle and write code for loading states. Suspense brings the benefits of coordinating and loading states easily.
贾里德(Jared)展示了他是如何利用unstable_createResource API和<Suspense />将低分辨率占位符艺术家个人资料照片图像显示为占位符的，而高分辨率图像则在后台下载，然后在完成下载后显示高分辨率图像。 g the unstable_createRe _createRe源API加载的数据也更容易读取，因为开发人员不再需要显式处理和编写用于加载状态的代码。 暂挂可轻松带来协调和加载状态的好处。
Lastly, it should be noted that code using <Suspense /> still works without concurrent React; the user experience wins are fewer but the developer experience wins remain.
最后，应该指出的是，使用<Suspense />的代码仍然可以在没有并发React的情况下运行； 用户体验获胜的次数较少，但开发人员体验获胜的机会仍然存在。
影片连结 (Video Links)
Concurrent Rendering in React — Andrew Clark and Brian Vaughn
React Native有问题，但正在解决 (React Native has problems but a solution is in the works)
React Native is Facebook’s framework for building native mobile apps using JavaScript and React. James Long, creator of Prettier, talks about what sucks about React Native, in particular, animations. In his experience, when writing React Native code related to responding to user interactions and animations, the user experience is horrible because of laggy animations.
React Native是Facebook的框架，用于使用JavaScript和React构建本机移动应用程序。 Prettier的创建者James Long谈到了React Native的特长，尤其是动画。 以他的经验，在编写与响应用户交互和动画有关的React Native代码时，由于动画的延迟，用户体验是可怕的。
The reason is because user interactions are handled on the native thread but the interaction effects are processed by the JavaScript thread over an async bridge. One solution to this problem is to use the React Native Gesture Handler library, which provides a declarative API exposing the platform native touch and gesture system to React Native. For even more complicated interactions and animations, react-native-reanimated (by the same author of React Native Gesture Handler) could be used to represent logic where declarative APIs cannot.
原因是因为用户交互是在本机线程上处理的，但是交互效果是由JavaScript线程在异步桥上处理的。 解决此问题的一种方法是使用React Native Gesture Handler库，该库提供了一个声明性API，将平台本机触摸和手势系统暴露给React Native。 对于更复杂的交互和动画，可以使用react-native-reanimated (由React Native Gesture Handler的同一作者)来表示声明性API无法实现的逻辑。
In the worst case scenario, developers could go even lower level and write native language code and APIs. In conclusion, block the main thread when dealing with animations and avoid Async where possible. Declarative APIs are great for many use cases, but imperative APIs would be useful as an escape hatch for complex use cases.
在最坏的情况下，开发人员可能会更底层，并编写本地语言代码和API。 总之，在处理动画时，请阻塞主线程，并尽可能避免Async。 声明性API非常适合许多用例，但命令性API可以用作复杂用例的逃生门。
Parashuram, a Facebook engineer on the React Native team goes through a brief overview of React Native’s current architecture and problems with the current React Native, which is a reiteration of James’ point about interactions on React Native not giving quick responses to user interactions which people are used to in purely native applications and on the web because of the async bridge between native thread and the JavaScript thread.
React Native团队的Facebook工程师Parashuram简要概述了React Native的当前体系结构以及当前React Native的问题，这重申了James关于React Native上交互的观点，即人们没有对用户交互做出快速响应由于本机线程和JavaScript线程之间的异步桥梁，它们通常用于纯本机应用程序和Web上。
The React Native team’s solution to this issue is a new interface for communicating between JavaScript and native land, called the JavaScript Interface (JSI). It’s basically a simple way for JavaScript to talk to Objective-C or Java (or any native language).
React Native团队针对此问题的解决方案是一个新的接口，称为JavaScript接口(JSI)，用于在JavaScript和本地之间进行通信。 从本质上讲，这是JavaScript与Objective-C或Java(或任何本地语言)进行对话的一种简单方法。
The JavaScript side gets access to a host object very similar to the HTML elements (on React Web) and then you can call can access methods and properties on it.
JavaScript端可以访问与HTML元素非常相似的宿主对象(在React Web上)，然后您可以调用can访问其上的方法和属性。
You can also use JSI to get native modules which returns a host object and you can call methods on them, similar to RPC calls. Another change that I’m looking forward to, is that React Native might be shifting some of the view manager and native modules outside of the core library into the community, which makes React Native more lightweight and makes upgrading it easy as long as you don’t depend on the external modules. Facebook uses React Native internally, as well as other big companies like Microsoft, Pinterest and Zynga.
您还可以使用JSI获取返回主机对象的本机模块，并且可以在其上调用方法，类似于RPC调用。 我期待的另一个变化是，React Native可能会将核心库之外的某些视图管理器和本机模块转移到社区中，这使React Native更加轻巧，并且只要您不做就可以轻松升级。不依赖于外部模块。 Facebook内部使用React Native，以及Microsoft，Pinterest和Zynga等其他大公司。
Hence, Facebook is committed to improving React Native and moving forward with the community.
因此，Facebook致力于改善React Native，并与社区一起前进。
影片连结 (Video Links)
您可以不使用GraphQL而使用GraphQL(的最佳功能) (You can use (the best features of) GraphQL without GraphQL)
Conor Hastings, an engineer at Netflix, went through the design principles of GraphQL and explains why GraphQL is appealing to engineers. He gave a good analogy of how traditional REST is akin to ordering pizza without being able to choose the toppings and ending up with 40 toppings vs using GraphQL where you are able to pick just the toppings you want — this eliminates the problem of over-fetching data. Other benefits of GraphQL include fetching hierarchical data with just one round trip and GraphQL’s awesome developer tooling (GraphiQL).
Netflix的工程师Conor Hastings遵循了GraphQL的设计原则，并解释了GraphQL为什么吸引工程师的原因。 他提供了一个很好的比喻，传统的REST类似于订购披萨而无法选择浇头，最终得到40个浇头，而使用GraphQL则可以只选择想要的浇头，这消除了过度获取的问题数据。 GraphQL的其他好处包括只需一次往返就可以获取分层数据，以及GraphQL出色的开发人员工具(GraphiQL)。
Not all software have a need for GraphQL.
并非所有软件都需要GraphQL。
It’s probably not worth your time to create a full GraphQL API if your application doesn’t need to be maintained, your users have high speed internet. However, you can still use parts of GraphQL in your app and leverage on some of the good parts of GraphQL — namely, the powerful query system that makes it easy to shape the data to meet the needs of your UI.
如果不需要维护您的应用程序，用户拥有高速互联网，那么可能就不值得花时间创建完整的GraphQL API。 但是，您仍然可以在应用程序中使用GraphQL的某些部分，并利用GraphQL的一些出色部分—即功能强大的查询系统，可以轻松地对数据进行调整以满足用户界面的需求。
Conor then introduces RouteQL, a library he built that aims to use tools from graphql-js (the GraphQL parser on the client) and other popular libraries from the GraphQL-ecosystem so that you can write GraphQL queries in the browser that talks to any back-end. By making some sacrifices and giving up some of the benefits of GraphQL, we can still leverage on the power of GraphQL without using GraphQL. GraphQL is a great fit for server-data driven apps without much client state.
然后，Conor引入了RouteQL ，这是他建立的一个库，旨在使用来自graphql-js(客户端上的GraphQL解析器)的工具以及来自GraphQL-ecosystem的其他流行的库，以便您可以在浏览器中编写GraphQL查询，以便与任何人进行对话。 -结束。 通过做出一些牺牲并放弃GraphQL的某些优势，我们仍然可以在不使用GraphQL的情况下利用GraphQL的强大功能。 GraphQL非常适合服务器数据驱动的应用程序，而无需太多客户端状态。
影片连结 (Video Links)
React帮助使用户界面变得漂亮 (React Helps Make User Interfaces Fancy)
Matt Perry goes through how animation is achieved using existing imperative-style animation libraries such as animated and Popmotion and their shortcomings. We can simplify imperative APIs into declarative ones by identifying patterns from the imperative logic that we write. As a solution to the problem mentioned, Matt introduces his animation library Pose which uses a declarative CSS-like approach for animating which makes writing common animations really simple.
马特·佩里(Matt Perry)讲述了如何使用现有的命令式动画库(例如， animated和Popmotion )实现动画以及它们的缺点。 通过从编写的命令式逻辑中识别模式，可以将命令式API简化为声明式API。 为了解决上述问题，Matt引入了他的动画库Pose ，该库使用类似于CSS的声明性方法进行动画制作，这使得编写普通动画变得非常简单。
In another talk by Elizabet Oliveira (or Miuki Miu on the web), she talks about what is SVG, the benefits of SVGs, the various ways we can use them on the web and in React. When SVG illustrations need to be animated and customizable, writing them as composable components with props is especially beneficial.
在Elizabet Oliveira(或Web上的Miuki Miu)的另一篇演讲中，她谈到了SVG是什么，SVG的好处，我们可以在Web上和React中使用它们的各种方式。 当需要对SVG插图进行动画处理和可自定义时，将它们编写为带有道具的可组合组件特别有益。
React-kawaii, is a library of cute illustrations built by Elizabet that are easily customisable. You can change the size, color, mood (contents) of complex SVG illustrations just by changing the props. Check out the demo on its website.
React-kawaii是由Elizabet制作的易于定制的可爱插图库。 您只需更改道具即可更改复杂SVG插图的大小，颜色，心情(内容)。 在其网站上查看演示 。
影片连结 (Video Links)
Create React App 2的新增功能 (What’s New in Create React App 2)
Create React App (CRA) is a starter project which makes it easy to bootstrap new React apps or if you want to try out React. Joe Haddad, a maintainer of CRA introduced what’s new in CRA 2: PostCSS support, Babel Macros, Sass and CSS modules, TypeScript support. Read more on the React blog.
Create React App(CRA)是一个入门项目，可以轻松引导新的React应用程序，或者如果您想试用React。 CRA的维护者Joe Haddad介绍了CRA 2的新功能：PostCSS支持， Babel Macros ，Sass和CSS模块，TypeScript支持。 在React博客上阅读更多内容。
影片连结 (Video Links)
Web非常适合制作复杂的用户界面 (The Web is Great for Making Complex User Interfaces)
GDevelop is a game editor built many years ago by Florian Rival, engineer at Facebook. He went through his journey on how he modernized the editor (originally written in C++) to the web by leveraging on React, Electron and WebAssembly. Florian used emscripten, which compiled his native bytecode to WebAssembly format and rewrote the UI in React leveraging on React’s vast ecosystem of component libraries and tooling. Florian heavily optimized the performance using virtualization, the new React profiler and shouldComponentUpdate. Game editors are extremely complex applications and it's impressive that Florian was able to port his native app into Electron in a year with the help of React and the other tools in the open source ecosystem.
GDevelop是由Facebook工程师Florian Rival于多年前创建的游戏编辑器。 通过使用React，Electron和WebAssembly，他经历了如何使编辑器(最初用C ++编写)现代化到网络的过程。 Florian使用了emscripten，该脚本将其本机字节码编译为WebAssembly格式，并利用React庞大的组件库和工具生态系统重写了UI。 Florian使用虚拟化，新的React profiler和shouldComponentUpdate极大地优化了性能。 游戏编辑器是极其复杂的应用程序，令人印象深刻的是Florian能够在React和开源生态系统中的其他工具的帮助下，在一年内将其本机应用程序移植到Electron中。
影片连结 (Video Links)
最后的想法 (Final Thoughts)
I initially found it weird that the React Hooks returned values in arrays to be destructured, but gradually got used to it after using it at work for over a month now. Besides the benefits of hooks mentioned above, there is another big win of build size going down because a lot of class methods are removed. State variables, because they are just local variables within a component, and now be minified too.
最初，我觉得很奇怪，React Hooks返回数组中要解构的值，但是在使用了一个多月后逐渐习惯了它。 除了上面提到的钩子的好处，有建筑面积的另一大胜利会 下降 ，因为很多类的方法被去除。 状态变量，因为它们只是组件中的局部变量，因此现在也可以缩小。
Hooks are great, but they don’t come without drawbacks.
钩子很棒，但是它们并非没有缺点。
useEffectrun on every render. If we set state within theuseEffectcallbacks, we could cause infinite loops. An example can be detailing the pitfall can be found in this Stack Overflow question I wrote here. It is recommended that developers read theuseEffectAPI carefully and understand it well before using it.useEffect在每个渲染useEffect运行。 如果在useEffect回调中设置状态，则可能导致无限循环。 我在这里写的这个Stack Overflow问题中可以找到一个陷阱的详细示例。 建议开发人员在使用前仔细阅读useEffectAPI并充分理解它。The closures (or code within)
useEffectanduseCallbackcould be referencing outdatedstateandprops. I also wrote about this pitfall in this Stack Overflow question. If you are unsure whether you are referencing old values, the state hook updater also has a callback form where you can access the previous state value.闭包(或其中的代码)
useEffect和useCallback可能引用了过时的state和props。 我还在这个Stack Overflow问题中写了关于这个陷阱的信息。 如果不确定是否要引用旧值，则状态挂钩更新程序还具有一个回调形式 ，您可以在其中访问先前的状态值。
More drawbacks can be found in the RFC here.
在此处的RFC中可以找到更多的缺点。
I’ve been using hooks at work and we implemented a small form input abstraction that helps to validate and track changed/dirty states of a form. My team likes it so far!
我在工作中一直使用钩子，我们实现了一个小的表单输入抽象，可帮助验证和跟踪表单的更改/脏状态。 到目前为止，我的团队喜欢它！
I haven’t got to play around with concurrent React, but from the demos, using it in production code seems so frictionless and easy. I believe concurrent React, Suspense and the profiler features are highly relevant to improving user experience and developer happiness.
我并没有玩过并发的React，但是从演示中来看，在生产代码中使用它似乎很顺手。 我相信并发的React，Suspense和事件探查器功能与改善用户体验和开发人员的满意度密切相关。
Looking forward to more React goodness in the upcoming versions of React! ?
期待在即将发布的React版本中获得更多的React好处！ ？
If you enjoyed this article, please don’t forget to leave a ? . (Do you know that you can clap more than once? Try it and see for yourself!)
如果您喜欢这篇文章，请不要忘记留下一个？ 。 (您知道您可以鼓掌不止一次吗？尝试一下，亲自看看！)
You can also follow me on GitHub and Twitter.
翻译自: https://www.freecodecamp.org/news/lessons-learned-at-react-conf-2018-bc390f5b1aa4/
2018 react 大会