[Meta] Refactors of React hooks

Đang mở
#41,795 1 bình luận 2 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Issue không nêu rõ tệp, bài kiểm thử hay điểm vào nào; trước tiên hãy làm rõ những mẫu React hook và lựa chọn dependency nào nằm trong phạm vi. Công việc được xem là hoàn tất khi đã thống nhất một tập hợp mẫu và xác định được hành vi refactor có thể quan sát đối với các ví dụ useMemo, useCallback và JSX, đồng thời định nghĩa các bài kiểm thử cho những trường hợp đó.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Awaiting More Feedback Suggestion

Search Terms

refactor, react, hooks

Suggestion

Provide a series of refactors about react hooks.

Use Cases

In my recently works. I have alway Wrap function, value declarations, expressions into React.useMemo or React.useCallback.
And I must find all the depends on the selection. And always missing some deps. It's not a good experience.

Could we provide some refactors to wrap something into well-known react hooks?

I'm not sure where's the bar of patterns we are allowed. but we have already had something like 'react-jsx'.

Examples


const Comp = props => {
  const value = props.a + props.b;

  const handleClick = () => {
    console.log('foo', value)
  }

  return <div onClick={handleClick}><SomeHeavyComponent value={value}/></div>
}
  • When I select props.a + props.b, convert into
React.useMemo(() => props.a + props.b, [props.a, props.b]);
  • When I select handleClick or the lambda, convert into
const handleClick = React.userCallback() => {
  console.log('foo', value)
}, [value])
  • When I select <SomeHeavyComponent value={value}/>, convert into
React.useMemo(() => (<SomeHeavyComponent value={value}/>), [value])

Checklist

My suggestion meets these guidelines:

  • This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • This wouldn't change the runtime behavior of existing JavaScript code
  • This could be implemented without emitting different JS based on the types of the expressions
  • This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
  • This feature would agree with the rest of TypeScript's Design Goals.
Ngôn ngữ chính
Go
Star
111k
Fork
14.4k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
106

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/TypeScript

Tất cả issue của microsoft/TypeScript

Issue tương tự

Thêm issue về Go

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.