記事ディレクトリ

序文
やっと

序文

前回の記事では、主にJSX構文の導入とステートレスコンポーネントの値の転送について説明しました。内容は比較的単純です。今日は、Reactエントリの3番目の爆弾であるステートフルコンポーネントとイベント処理を紹介します。

コンポーネントの分類

Reactでは、コンポーネントは機能コンポーネントとクラスコンポーネント、つまりステートレスコンポーネントとステートフルコンポーネントに分けられます。

機能コンポーネント（ステートレスコンポーネント）
は、機能の形式を直接定義します。状態はなく、小道具のみであり、ライフサイクル機能はありません。
```
// 函数式组件(无状态组件)
function Hello() {
      
      
  return <h1>Hello,jianan</h1>
}
```
クラスコンポーネント（ステートフルコンポーネント）
はクラス定義を使用し、React.Componentを継承するように拡張します。データの保存と管理、および小道具とライフサイクル機能の状態があります。
```
// class组件(有状态组件)
class Hello extends React.Component {
      
      
  render() {
      
      
    return <h1>Hello jianan</h1>
  }
}
```

ステートレスおよびステートフルコンポーネントを使用するためのルール

データの変更は状態に応じて変更されるため、データの値を変更せずにロジックを処理するだけの場合は、ステートレスコンポーネントを使用してください。小道具を使用して、コンポーネント間で値を通信および渡すことができます。
一部のデータを変更する必要がある場合、または一部のデータを保存してデータの追加、削除、変更を行う場合は、ステートフルコンポーネントを使用する必要があります。状態を使用しており、データが変更されると、ライフサイクルでこれらの機能がトリガーされます。

ステートレスコンポーネントとステートフルコンポーネントへのアクセス

ステートレスコンポーネント
propsを使用して値を渡す場合、アクセスにはprops.property名を使用します。
ステートフルコンポーネント
propsを使用して値を渡す場合は、this.props。プロパティ名を使用してアクセスします。状態を使用して状態を定義する場合は、this.state。プロパティ名を使用してアクセスします。

一般的なデータは親コンポーネントを介して送信されるため、統合されたデータ管理を実行でき、親レベルで集中データ管理を実行できます。上記はreduxを使用しない場合です。reduxを使用すると、状態管理はreduxで実行されます。

ステートフルコンポーネント

この記事では、最初にステートフルコンポーネントについて学びましょう。
ステートフルコンポーネントは、ライフサイクルの非常に基本的で低レベルのメソッドであるrenderメソッドを使用してレンダリングする必要があり、レンダリングに使用する必要があります。

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

ステートフルコンポーネントの小道具は値を渡します

渡す必要のある値はコンポーネントの真上に書き込まれ、レンダリング時に単一の中括弧{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>

ステートフルコンポーネントまたはステートレスコンポーネントのどちらを使用するかを選択するにはどうすればよいですか？開発でどのコンポーネントをもっと使用する必要がありますか？

回答：ステートレスコンポーネントをできるだけ使用することを選択してください。ステートフルコンポーネントの場合、ライフサイクルに対応するいくつかの機能がトリガーされるためです。状態が変化すると、仮想domが再レンダリングされます。これは、データの保存や処理などを行う必要がない限り、現在のプロジェクトの操作に影響を与え、ステートフルコンポーネントを選択します。

イベント処理

イベントハンドラの構文

React要素のイベント処理はDOM要素の処理と非常に似ていますが、構文が多少異なります。Reactイベントは、純粋な小文字ではなく、キャメルケースで名前が付けられます。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。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やVue3のプロキシメソッドと同様のObject.definePropertyを実装してデータの変更を監視しないため、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が入力に入力された値であることがわかります。

ここに画像の説明を挿入

双方向バインディング効果：