React에서 이벤트 프로세서 함수를 조합하는 5가지 키워드
32115 단어 reactnodewebdevjavascript
JavaScript는 독특한 조합과 함수 생성 방식으로 칭찬을 받고 있습니다.이것은 자바스크립트에서 함수는 일급 공민이기 때문이다. 이것은 함수가 값으로 간주되고 다른 함수가 가지고 있는 모든 조작 속성을 가지고 있다는 것을 의미한다. 예를 들어 변수에 분배할 수 있고 함수 매개 변수로 전달할 수 있으며 함수에서 되돌아올 수 있다는 것이다.
react에서 이벤트 처리 프로그램을 조합하기 위한 5가지 관건적인 힌트를 토론할 것입니다.이 글은 모든 가능한 내용을 포함하지는 않지만, 이벤트 처리 프로그램을 구성하는 중요한 방법을 포함할 것이며, 모든react 개발자들은 적어도 이런 방법을 알아야 한다.
입력 요소 하나부터 시작해서
value 및 onChange 아이템을 추가합니다.import React from 'react'
import './styles.css'
function MyInput() {
const [value, setValue] = React.useState('')
function onChange(e) {
setValue(e.target.value)
}
return (
<div>
<input type='text' value={value} onChange={onChange} />
</div>
)
}
export default MyInput
onChange, 첫 번째 매개 변수는 처리 프로그램에 추가된 요소의 이벤트 대상이다.여기서 우리는 무엇을 개선할 수 있습니까?일반적으로 다시 사용할 수 있는 구성 요소를 작성하는 것은 매우 좋은 방법이며, 우리는 그것을 다시 사용할 수 있다.
1. 세터를 더 높은 레벨로 이동
다른 구성 요소가 이 입력을 다시 사용할 수 있도록 설정
value 상태의 책임을 props 에 전달하는 방법입니다.import React from 'react'
import MyInput from './MyInput'
function App() {
const [value, setValue] = React.useState('')
return <MyInput value={value} />
}
export default App
function App() {
const [value, setValue] = React.useState('')
function onChange(e) {
setValue(e.target.value)
}
return <MyInput value={value} onChange={onChange} />
}
function MyInput({ value, onChange }) {
return (
<div>
<input type='text' value={value} onChange={onChange} />
</div>
)
}
App 구성 요소는 우리의 MyInput 구성 요소와 완전히 같고, 이름만 다르다.그럼 포인트가 뭐예요?2. 확장을 위해 더 많은 정보가 필요하면 이벤트 프로세서를 포장하십시오.
우리가 글을 쓰기 시작했을 때, 일은 변화하기 시작했다.
MyInput 구성 요소를 보십시오.우리는 이 재사용 가능한 구성 요소에 추가 기능을 주어 더욱 유용하게 할 수 있다. onChange 요소를 직접 분배하는 것이 아니라.우리는 다른 onChange에서 조합하여
input 조작하고 새로운 onChange 을 요소에 추가할 수 있다.새로운 onChange 에서는 프로스에서 원래의 onChange 기능을 호출합니다. 이렇게 하면 기능이 여전히 정상적으로 작동할 수 있습니다. 마치 아무것도 변하지 않은 것처럼.예:
function MyInput({ value, onChange: onChangeProp }) {
function onChange(e) {
onChangeProp(e)
}
return (
<div>
<input type='text' value={value} onChange={onChange} />
</div>
)
}
onChange의value가 변화할 때 추가 논리를 주입하는 강력한 능력을 가져왔다.그것의 행위는 정상적이다. 왜냐하면 그것은 여전히 그 블록 안에서 원시 input 를 호출하기 때문이다.예를 들어 우리는 현재 요소를 강제로 입력해서 숫자 값만 받아들일 수 있고 최대 6글자의 길이만 받아들일 수 있다. 만약에 우리가 그것을 사용하여 사용자의 휴대전화 로그인을 검증하고 싶다면 이것은 매우 유용하다.
function isDigits(value) {
return /^\d+$/.test(value)
}
function isWithin6(value) {
return value.length <= 6
}
function MyInput({ value, onChange: onChangeProp }) {
function onChange(e) {
if (isDigits(e.target.value) && isWithin6(e.target.value)) {
onChangeProp(e)
}
}
return (
<div>
<input type='text' value={value} onChange={onChange} />
</div>
)
}
onChange에서 이루어질 수 있어 아무런 문제가 없다.그러나 부급 App 프로세서가 onChange 의 이벤트 대상만 필요로 하는 것이 아니라면 어떻게 해야 합니까?거기MyInput 프로세서는 더 이상 유용하지 않습니다.function App() {
const [value, setValue] = React.useState('')
function onChange(e) {
setValue(e.target.value)
}
return <MyInput value={value} onChange={onChange} />
}
onChange 이벤트 대상과 요소의 값이 바뀌고 있음을 아는 것 외에 이 값이 App 프로세서의 실행 상하문에 있다는 것을 알고 있기 때문에 무엇을 필요로 합니까?3. 매개 변수로 구성된 원시 처리 프로그램 활용
직접 액세스
onChange 요소 자체는 매우 유용하다.이것은 일부 input 대상을 사건 대상과 함께 전달하는 것이 매우 유용하다는 것을 의미한다.ref 처리 프로그램은 여기에서 구성되어 있기 때문에 쉽게 완성할 수 있다.function MyInput({ value, onChange: onChangeProp }) {
function onChange(e) {
if (isDigits(e.target.value) && isWithin6(e.target.value)) {
onChangeProp(e)
}
}
return (
<div>
<input type='text' value={value} onChange={onChange} />
</div>
)
}
onChange를 성명하여 useRef에 연결하고 대상 내부에서 두 번째 매개 변수로 input에 전달하여 호출자가 접근할 수 있도록 하는 것이다.function MyInput({ value, onChange: onChangeProp }) {
const ref = React.useRef()
function onChange(e) {
if (isDigits(e.target.value) && isWithin6(e.target.value)) {
onChangeProp(e, { ref: ref.current })
}
}
return (
<div>
<input ref={ref} type='text' value={value} onChange={onChange} />
</div>
)
}
function App() {
const [value, setValue] = React.useState('')
function onChange(e, { ref }) {
setValue(e.target.value)
if (ref.type === 'file') {
// It's a file input
} else if (ref.type === 'text') {
// Do something
}
}
return (
<div>
<MyInput value={value} onChange={onChange} />
</div>
)
}
4. 고급 함수 처리 프로그램과 조합 처리 프로그램의 서명을 동일하게 유지
일반적으로 합성 함수의 서명과 원시 함수의 서명을 똑같이 유지하는 것은 매우 중요한 실천이다.내 말은, 우리의 예시에서 두 개의
onChangeProp 처리 프로그램의 첫 번째 매개 변수는 모두 이벤트 대상을 위해 보존된 것이다.함수를 조합할 때 서명을 똑같이 유지하는 것은 불필요한 오류와 혼동을 피하는 데 도움이 된다.
만약 우리가 다음과 같은 매개 변수의 위치를 교환했다면:
그리고 우리는 구성 요소를 다시 사용할 때 쉽게 잊어버리고 망친다.
function App() {
const [value, setValue] = React.useState('')
function onChange(e, { ref }) {
// ERROR --> e is actually the { ref } object so e.target is undefined
setValue(e.target.value)
}
return (
<div>
<MyInput value={value} onChange={onChange} />
</div>
)
}
좋은 예는 호출자가 임의의 이벤트 처리 프로그램을 제공하고 프로그램이 정상적으로 실행될 수 있도록 허락하기를 원할 때:
const callAll = (...fns) => (arg) => fns.forEach((fn) => fn && fn(arg))
function MyInput({ value, onChange, onChange2, onChange3 }) {
return (
<input
type='text'
value={value}
onChange={callAll(onChange, onChange2, onChang3)}
/>
)
}
onChange 문자열과 같은 특정 방법을 실행하려고 시도하는 경우 서명이 .concat 이 아니라 function(event, ...args) 이기 때문에 오류가 발생합니다.function App() {
const [value, setValue] = React.useState('')
function onChange(e, { ref }) {
console.log(`current state value: ${value}`)
console.log(`incoming value: ${e.target.value}`)
setValue(e.target.value)
console.log(`current state value now: ${value}`)
}
function onChange2(e) {
e.concat(['abc', {}, 500])
}
function onChange3(e) {
console.log(e.target.value)
}
return (
<div>
<MyInput
value={value}
onChange={onChange}
onChange2={onChange2}
onChange3={onChange3}
/>
</div>
)
}
5. 이벤트 처리 프로그램 (클립) 에 대한 참조 및 의존 상태를 피합니다.
이 일을 하는 것은 정말 위험하다!
만약 잘했다면, 리셋 처리 프로그램의 상태를 처리할 때 문제가 없을 것입니다.그러나 만약 당신이 어떤 점에서 미끄러진다면, 디버깅하기 어려운 소리 없는 버그를 도입하면, 결과는 하루의 추가 시간을 삼키기 시작할 것이다. 이 시간을 회수할 수 있기를 바란다.
만약 당신이 이런 일을 하고 있다면:
function onChange(e, { ref }) {
console.log(`current state value: ${value}`)
console.log(`incoming value: ${e.target.value}`)
setValue(e.target.value)
console.log(`current state value now: ${value}`)
}
우리의
function(str, ...args) 값이 input 이면 키보드에 다른 "23" 를 입력하면 다음과 같이 됩니다.
자바스크립트의 실행 상하문을 이해하면 의미가 없습니다.
"3" 에 대한 호출이 다음 줄로 이동하기 전에 실행되었기 때문입니다!사실 이것은 여전히 정확하다.현재 JavaScript는 모든 것을 잘못하지 않았습니다.그것은 사실상 자신의 일을 하고 있다.
렌더링 프로세스에 대한 자세한 내용은 의 documentation 를 참조하십시오.
그러나 간단하게 말하면 기본적으로react가 새로운 렌더링 단계에 들어가면 이 렌더링 단계의 특정한 모든 내용을'스냅샷'한다.이 단계에서react는 본질적으로react 요소 트리를 만들었습니다. 이 시간점의 트리를 표시합니다.
정의에 따라 호출
setValue 은 확실히 다시 렌더링을 할 수 있지만, 이 렌더링 단계는 미래의 시간입니다!이것이 바로 상태setValue가 value 집행을 마친 후에도 여전히 23 인 이유다. 왜냐하면 이 시간의 집행은 이 과장된 것이 특정하고 그들이 사는 작은 세계와 같기 때문이다.이것이 바로 JavaScript에서 컨텍스트를 실행하는 개념입니다.
예제에서 이것은 react의 렌더링 단계입니다. (react가 실행 상하문이 있는 것으로 간주할 수 있습니다.)
그럼에도 불구하고 우리가 걸었던 전화
setValue를 다시 한 번 봅시다.
이 모든 것은 같은 렌더링 단계에서 발생하기 때문에 함몰은 여전히
setCollapsed 그리고 true 으로 전달된다.전체 어셈블리가 다시 렌더링되면 다음 렌더링 단계 값은 이전 렌더링 단계 값을 나타냅니다.
medium에서 저를 찾았어요.
Reference
이 문제에 관하여(React에서 이벤트 프로세서 함수를 조합하는 5가지 키워드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jsmanifest/5-critical-tips-for-composing-event-handler-functions-in-react-1ai텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
