기사 디렉토리

머리말
마침내

머리말

지난 글은 주로 JSX 문법의 도입과 stateless 컴포넌트의 가치 전달에 대해 이야기했는데, 내용은 비교적 간단합니다. 오늘은 React 입문서의 세 번째 폭탄인 stateful 컴포넌트와 이벤트 처리를 가져왔습니다.

구성 요소의 분류

React에서 컴포넌트는 기능 컴포넌트와 클래스 컴포넌트, 즉 stateless 컴포넌트와 stateful 컴포넌트로 나뉩니다.

기능적 컴포넌트(stateless 컴포넌트)
는 함수의 형태를 직접 정의하며 state는 없고 props만 있으며 라이프 사이클 기능은 없습니다.
```
// 函数式组件(无状态组件)
function Hello() {
      
      
  return <h1>Hello,jianan</h1>
}
```
클래스 구성 요소(상태 저장 구성 요소)
는 클래스 정의를 사용하고 React.Component를 상속하도록 확장합니다. 데이터 저장 및 관리를 위한 상태와 props 및 수명 주기 기능이 있습니다.
```
// class组件(有状态组件)
class Hello extends React.Component {
      
      
  render() {
      
      
    return <h1>Hello jianan</h1>
  }
}
```

상태 비저장 및 상태 저장 구성 요소 사용 규칙

상태에 따라 데이터가 변경되기 때문에 데이터의 값을 변경하지 않고 일부 로직만 처리한다면 Stateless 컴포넌트를 사용하십시오. props를 사용하여 구성 요소 간에 값을 전달하고 전달할 수 있습니다.
일부 데이터를 변경해야 하거나 일부 데이터를 저장하고 데이터에 일부 추가, 삭제 및 변경을 수행하려는 경우 상태 저장 구성 요소를 사용해야 합니다. 우리는 상태를 사용하고 있으며 데이터가 변경되면 수명 주기에서 이러한 기능을 트리거합니다.

상태 비저장 구성 요소 및 상태 저장 구성 요소에 대한 액세스

상태 비저장 구성 요소
props를 사용하여 값을 전달할 때 액세스를 위해 props.property 이름을 사용합니다.
상태 저장 구성 요소
props를 사용하여 값을 전달할 때 this.props.속성 이름을 사용하여 액세스합니다. 상태를 사용하여 상태를 정의할 때 this.state.속성 이름을 사용하여 액세스합니다.

일반 데이터는 상위 구성 요소를 통해 전송되므로 통합 데이터 관리가 수행되고 상위 수준에서 중앙 집중식 데이터 관리가 수행될 수 있습니다. 위의 내용은 redux를 사용하지 않는 경우이며, redux를 사용하면 redux에서 상태 관리를 합니다.

상태 저장 구성 요소

이 글에서는 먼저 stateful 컴포넌트에 대해 알아보자

<script type="text/babel">
    class Hello extends React.Component {
    
    // 有状态的组件需要使用render方法进行渲染,是生命周期里面非常基础和底层的方法,一定要用它来进行渲染
        render() {
    
    
            return <h1>hello weiyu</h1>
        }
    }
    ReactDOM.render(
        <Hello/>,
        document.getElementById("root")
    )
</script>

Stateful 구성 요소 소품 전달 값

전달해야 할 값은 구성 요소 바로 위에 작성되며 단일 중괄호 { this.props.name }는 렌더링할 때 직접 사용됩니다.

<div id="root"></div>
<script type="text/babel">
    class Hello extends React.Component {
    
    
        render() {
    
    
            return <div>
                <h1>这是一个有状态组件</h1>
                <h1>姓名：{
    
    this.props.name}</h1>
                <h1>年龄：{
    
    this.props.age}</h1>
                <h1>性别：{
    
    this.props.sex}</h1>
            </div>
        }
    }
    ReactDOM.render(
        <Hello name="weiwei" age="18" sex="男"/>,
        document.getElementById("root")
    )
</script>

상태 저장 구성 요소 상태

상태 저장 구성 요소의 상태는 일반적으로 실제 개발에서 다음과 같은 방식으로 작성됩니다.

<div id="root"></div>
<script type="text/babel">
    class Hello extends React.Component {
    
    
        state = {
    
    
            age: '16',
            sex: '男'
        }
        render() {
    
    
            return <div>
                <h1>这是一个有状态组件</h1>
                <h1>姓名：{
    
    this.props.name}</h1>
                <h1>年龄：{
    
    this.state.age}</h1>
                <h1>性别：{
    
    this.state.sex}</h1>
            </div>
        }
    }
    ReactDOM.render(
        <Hello name="weiwei"/>,
        document.getElementById("root")
    )
    
</script>

상태 저장 구성 요소 또는 상태 비저장 구성 요소를 사용하도록 선택하는 방법은 무엇입니까? 개발에서 어떤 구성 요소를 더 사용해야 합니까?

답변: 상태 비저장 구성 요소를 가능한 많이 사용하도록 선택하십시오. 상태 저장 구성 요소인 경우 수명 주기에 해당하는 일부 기능을 트리거하기 때문입니다. 상태가 변경되면 데이터 저장, 처리 등을 수행한 다음 상태 저장 구성 요소를 선택해야 하는 경우가 아니면 현재 프로젝트의 작동에 영향을 미치는 가상 돔을 다시 렌더링하도록 트리거합니다.

이벤트 처리

이벤트 핸들러 구문

React 요소의 이벤트 처리는 DOM 요소의 이벤트 처리와 매우 유사하지만 구문이 약간 다릅니다. React 이벤트는 순수한 소문자 대신 camelCase로 명명됩니다. JSX 구문을 사용할 때 문자열이 아닌 이벤트 핸들러로 함수를 전달해야 합니다.

<button onclick='fn()'>点击事件</button>

// React里
<button onClick={fn}>点击事件</button>

또한 React에서 기본 이벤트를 방지하는 것은 false를 반환하여 수행할 수 없지만 preventDefault를 사용하여 수행할 수 있습니다.

<a href="#" onclick="console.log('hello');return false">click</a>

handleClick(e) {
    
    
  e.preventDefault()
  console.log('hello')
}

<a href="#" onClick={
    
    handleClick}>click</a>

이것은 이벤트 핸들러에서

JS에서 클래스 메소드는 기본적으로 이것을 바인딩하지 않으며 this.handleClick을 바인딩하는 것을 잊어서 onClick에 전달하면 이 함수를 호출할 때 this 값이 정의되지 않습니다.

class Hello extends React.Component {
    
    
  constructor() {
    
    
    super()
    // 如果不在constructor绑定this打印出来的值是undefined
    this.updateInfo = this.updateInfo.bind(this)
  }
  updateInfo() {
    
    
    console.log(this) 
  }
  updateState() {
    
    
    console.log(this)
  }
  updateAge() {
    
    
    console.log(this)
  }
  render() {
    
    
    return <div>
      <button onClick={
    
    this.updateInfo}>更新信息</button>
      {
    
    /* 像下面这样进行绑定也是可行的 */}
      <button onClick={
    
    this.updateState.bind(this)}>更新状态</button>
      <button onClick={
    
    () => this.updateAge()}>更新年龄</button>
    </div>
  }
}

또는 직장에서 가장 일반적으로 사용되는 방법인 화살표 함수 할당으로 함수를 정의하려면 다음 방법을 사용하십시오.

class Hello extends React.Component {
    
    
  updateInfo = () => {
    
    
    console.log(this)
  }
  render() {
    
    
    return <button onClick={
    
    this.updateInfo}>更新信息</button>
  }
}

다음은 완전한 예입니다. 참조할 수 있습니다.
1. 버튼을 클릭하여 연령을 업데이트합니다. 2. 두 번째 버튼을 클릭하여 true와 false 사이를 전환합니다.

<script type="text/babel">
    class Hello extends React.Component {
    
    
        state = {
    
    
            name: 'beiyu',
            age: 14,
            flag: true
        }
        updateInfo() {
    
    
            console.log(this)
            this.setState({
    
    
                age: 5
            })
        }
        updateState() {
    
    
            this.setState({
    
    
                flag: !this.state.flag
            })
        }
        render() {
    
    
            return <div>
                <h1>这是一个有状态组件</h1>
                <h1>姓名：{
    
    this.state.name}</h1>
                <h1>年龄：{
    
    this.state.age}</h1>
                <button onClick={
    
    this.updateInfo.bind(this)}>更新年龄</button>
                <button onClick={
    
    () => this.updateState()}>{
    
    this.state.flag ? 'TRUE' : 'FALSE' }</button>
            </div>
        }
    }
    ReactDOM.render(
        <Hello/>,
        document.getElementById("root")
    )
</script>

이벤트 처리 및 조건 처리

예를 들어 알아보겠습니다. 로그인 상태에 따라 다른 구성 요소를 표시하고, true는 로그인 구성 요소를 표시하고, false는 로그아웃 구성 요소를 표시합니다.

<script type="text/babel">
     function Login() {
    
    
         return <button>login</button>
     }
     function Logout() {
    
    
         return <button>logout</button>
     }
     class Hello extends React.Component {
    
    
         state = {
    
    
             isLogin: true
         }
         updateState = () => {
    
    
             this.setState({
    
    
                 isLogin: !this.state.isLogin
             })
         }
         
         render() {
    
    
             // const isLogin = this.state.isLogin
             const {
    
     isLogin } = this.state
             return <div>
                 <h1>这是一个有状态组件</h1>
                 {
    
     isLogin ? <Login/> : <Logout/> }
                 <button onClick={
    
    this.updateState}>更新状态</button>
             </div>
         }
     }
     ReactDOM.render(
         <Hello/>,
         document.getElementById("root")
     )
 </script>

왜 setState를 사용하여 React에서 상태를 수정합니까?
답변: React는 Vue2와 유사한 Object.defineProperty 또는 Vue3의 프록시 메소드를 구현하여 데이터 변경 사항을 모니터링하지 않으므로 Component에서 상속받은 setState를 통해 React 상태 변경 사항을 알려야 하며 호출 시 다시 실행됩니다. setState 렌더 메소드

제한된 구성 요소

Vue는 반응형 데이터가 중요하지만 React에는 반응형 기능이 없기 때문에 애플리케이션에서 수동으로 해야 할 일이 많습니다.

<script type="text/babel">
    class Hello extends React.Component {
    
    
        render() {
    
    
            return <input type="text" value="123" />
        }
    }
    ReactDOM.render(
        <Hello/>,
        document.getElementById("root")
    )
</script>

이때 Hello가 제한된 컴포넌트로 렌더링된 후 입력 상자에 입력한 값은 모두 무효가 되며 사용자가 입력한 값에 응답하려면 onChange 이벤트를 사용해야 합니다.
다시 작성하여 데이터의 양방향 바인딩을 구현해 보겠습니다.

<div id="root2"></div>
<script type="text/babel">
    class App extends React.Component {
    
    
        state = {
    
    
            value: 'hello'
        }
        change = (event) => {
    
    
            console.log(event);
            this.setState({
    
    
                value: event.target.value
            })
        }
        render() {
    
    
            return <div>
                <input type="text" value={
    
    this.state.value} onChange={
    
    this.change} />
                <h2>{
    
    this.state.value}</h2>
            </div>
        }
    }
    ReactDOM.render(
        <App/>,
        document.getElementById("root2")
    )
</script>

onChange 이벤트를 입력에 바인딩한 다음 event.target.value를 변경 함수의 값에 할당합니다.
여기에서 우리는 함수의 이벤트 매개변수를 전달하고 그것을 출력할 때 event.target.value가 내 입력에 입력된 값임을 알 수 있습니다

여기에 이미지 설명 삽입

양방향 바인딩 효과: