React Advanced-2019년 런던

런던 깊숙이!
다음은 2019년 런던 React Advanced London 대회에 대한 저의 추억과 이 행사를 곁들인 영상입니다.

Ken Wheeler - 반응 성능

켄의 주제 강연은 사람을 실망시키지 않았다.켄은 성능 복구는 규범적이지 않고 수수께끼 같다고 말했다.
이 점을 돕기 위해 그는 IMDOPE 시스템을 규정했다!

IMDOPE 시스템

나는 문제가 있다고 확신한다

당신의 시간을 측정하세요

D 계획 수립

O펜 개발 도구

P가 좋아질 때까지 누워

E njoy New performant 어플리케이션

켄은 초당 60프레임의 속도로 실행되는 애니메이션과 성능 탭에 나타나는 방법을 상세하게 소개했다.
사용자 타이머 API (들어본 적이 없음) 는 정확한 성능 표시를 정의할 수 있으며, 개발 도구에서 이 표시를 명명하고 표시할 수 있습니다.
예:

performance.mark('mainthread-start')
# do expensive things for performance
performance.mark('mainthread-stop')
performance.measure('mainthread', 'mainthread-start', 'mainthread-stop')

기본적으로 React는 렌더링을 제어하지 않습니다. 성능과 관련된 문제는 일반적으로 불필요한 렌더링과 관련이 있습니다.
여러 구성 요소가 동시에 렌더링되고 다시 렌더링될 때, React는 보통 좋지 않습니다. (cough React Memo!)
React-dev 도구 탐색기를 언급하였으며, React-dev 도구 탐색기의 보기에 많은 구성 요소가 있다면, React는 모든 내용을 어떻게 다시 렌더링하는지 보여 줍니다.
흥미로운 부분이 하나 있다. useCallback React API를 보여 주려고 할 때 켄은 두 번째 파라미터를 놓쳐서 React 문서를 찾아 설명해야 했다.

“as developers almost everything we do is building elaborate lists of shit” - Ken Wheeler

Brian Vaughn의 React Window 또는 React Virtualized 목록을 가상화해야 합니다. 그는 10k 이상의 항목이 포함된 목록을 계속 렌더링하고 렌더링 목록에서 저질 성능을 보여 준 다음 React 창을 사용합니다.
네트워크 종사자
이것은 나에게 있어서 매우 재미있는 부분이다. 인터넷 종사자가 생기면 너는 주 라인에서 비싼 임무를 제거할 수 있다.
그러나 서열화와 관련된 단점이 있다.
WASM 회사
그는 어리석은 펑크의'다시'디코더 예시를 완성하기 위해 러스트로 만든 자동 조정 예시와 구글 오디오 작업 집합을 완성했다.바보!

왕-처음부터(갈고리로)반응

숀은 CodeSandbox.io 세션에서 React with Hooks와 React Concurrency(Fibre)를 다시 만들었습니다.
이 강연은 지난 강연React hooks from scratch의 속편으로 모두 29줄이다.그는 "130줄 코드로 React를 다시 만들 것입니다!"부터 시작한다.
빠른 속도로 그는 많은 개념, 내가 익숙하지 않은 React와 관련된 많은 내용, 포괄하는 주제를 포함했다.

반응섬유

렌더링

체인 테이블 스트리밍

화해와 약속

useState갈고리

작업 회로

궁금증

일단 포조!(기존 JavaScript 객체):

const element = {
  type: 'h1',
  props: {
    children: 'Hello world',
  },
};

그리고 광섬유가 무엇인지 정의했습니다. 이 광섬유는 POJO의 확장자입니다.

const element = {
  type: 'h1',
  props: {
    children: 'Hello world',
  },
  dom: domNode,
  parent: parentFiber,
  child: childFiber,
  sibling: null,
  alternate: currentFiber,
  effectTag: PLACEMENT,
  hooks: [],
};

솔직히 숀이 걷는 속도는 간결하지만 때로는 빠르다.
그는 모든 주요 부분과 코드 예시를 포괄했다.TL;시간 자르는 궁금증 박사 여기 있습니다.
코드에 사용되는 유일한 의존 항목은 Babel withththisfetch example입니다. 이 중 상태를 사용하고 필요할 때 일시 정지(또는 캐시)하는 자원에서 읽고 있습니다.

Vojtech Miksu. - 진짜 싫어.

Vojtech는 드래그 앤 드롭에 관한 역사 수업과 그에 따른 복잡성을 배웠다.
그는 사용 가능한 옵션과 왜 그들이 자신의 React Movable 접근 드래그 프로젝트를 실시했는지 상세하게 소개했다.
다음은 2019년 RSCONF 강연입니다.

다니엘 어빈. - 유닛 테스트에 지장을 주지 마세요.

테스트를 개선하는 데 도움을 줄 수 있는 여섯 가지 생각
생각1:
항상 Arrange-Act-Assert에 따라 변수를 제자리에 놓고 예상 결과를 나타냅니다.
간단한 테스트 유지
생각2:
구성 요소의 라이프 사이클을 테스트합니다.
생각3:
표면 구역을 테스트하고 좋은 테스트 정밀 확정 오류를 주의하십시오.
생각4:
일을 망친 후에 재구성하다.
생각5:
언제든지 React 구성 요소를 떠나십시오.테스트가 간단한 기능, 간단, 반응 구성 요소, 그리 간단하지 않은 테스트.
생각6:
자신의 테스트 라이브러리 작성!😱
그것은 당신이 DOM을 더욱 잘 이해하고 더욱 공부하는 데 도움을 줄 것입니다!!!
도서관은 너를 그들의 테스트 방식에 고정시켰다.
내가 그 중에서 얻은 주요 수확은 다음과 같다.

No tests are better than bad tests!

강연이 끝난 후에 나는React native hall에 가서 가벼운 강연을 보았다. 왜냐하면 나는 강연자를 알고 있기 때문이다.

Dave Nicholas - 함수 및 클래스

그는 특이구에서 기능 구성 요소로의 이동을 토론했다.

제이미 바튼 - 강의와 하이라이트 101

다른 사람들이 이익을 얻을 수 있기 때문에 당신이 배운 것을 이야기하는 비기술적인 강연
어떤 형태로든그것은 켄의 IMDOPE 시스템처럼 잊을 수 없지만, 그것이 전달하는 정보가 가장 중요하다.
제이미는 이어 지역사회가 어떤 형태의 공유에서 이익을 얻을 수 있는지에 대해 이야기했다.

YouTube 비디오 또는 비디오 시리즈

자습서

해커 경연대회, 주최 또는 조직

독립 해커, 이정표 발표

레일

내가 공감할 수 있는 것은:

“Write the guide you needed as a developer when trying to do this.”

나 자신은 이미 오랫동안 해 왔다. 이것은 내가 매우 믿는 일이다.

점심 식사

Siddharth Kshetrapal - 디자인 시스템 디자인 시스템

Sid는 디자인 시스템의 제작을 잘 개술하였다.디자인 시스템을 설계하거나

“When I started laying out a system last year I would just call them gray, gray darker and gray darkest.”

기본적으로 한 가지 색깔이 위에 없다.
그리고 그는 이 보석을 꺼냈다!

const theme = {
  colours: {
    grays: {
      100: '#fff9f9'
      200: '#e6e6e6'
      300: '#999999'
      400: '#757575'
      500: '#242424'
      700: '#151515'
      900: '#111111'
    }
  }
}

따라서 필요하면 더 많은 색을 추가할 수 있습니다. 여기에 150이나 a600을 추가할 수 있습니다.
Sid는 이어서 스타일링 구성 요소가 얼마나 훌륭한지, 그리고 그 미묘한 점에 대해 이야기했다.

import styled from 'styled-components';

const FormLabel = styled.label(
  props => `
  color: ${props.theme.colors.text.subtle}
  font-size: ${props.theme.fontSizes[2]}
`
);

지루해 보이기 때문에 @styled-system/css 로 줄일 수 있습니다.

import styled from 'styled-components';
import css from '@styled-system/css';

const FormLabel = styled.label(
  css({
    color: 'text.subtle',
    fontSize: 2,
  })
);

예쁜 물건!

Emma Brillhart - TypeScript, GraphQL 및 Hooks를 사용하여 보다 읽을 수 있는 React 코드 라이브러리

Emma의 강연은 왜 TypeScript가 좋은지, 그리고 개발자에게 어떻게 더 빠른 입문 체험을 제공하는지를 둘러싸고 있다.
클라이언트에서 TypeScript를 사용하면 내장 문서, 더 나은 탐색, 더 적은 기술 채무를 제공할 수 있습니다.
유튜브의 모든 대화의 재생 목록을 완성합니다.
트위터와 트위터에서 확인하세요.