reactjs - tutorial - redux




প্রতিক্রিয়া-ভাই/পিতা উপাদান উপাদান ফর্ম অবস্থা রাষ্ট্র পাস করার সঠিক উপায়? (6)

  • ধরুন আমার একটি রে্যাক্ট ক্লাস পি আছে, যা দুই সন্তানের ক্লাস, C1 এবং C2 রেন্ডার করে।
  • C1 একটি ইনপুট ক্ষেত্র রয়েছে। আমি এই ইনপুট ক্ষেত্রটিকে Foo হিসাবে উল্লেখ করব।
  • আমার লক্ষ্য F2 মধ্যে পরিবর্তন করতে C2 প্রতিক্রিয়া হয়।

আমি দুটি সমাধান নিয়ে এসেছি, কিন্তু তাদের মধ্যে কেউই মোটামুটি সঠিক বোধ করে না।

প্রথম সমাধান:

  1. একটি রাষ্ট্র, state.input পি।
  2. P onChange একটি onChange ফাংশন তৈরি করুন, যা একটি ইভেন্ট নেয় এবং state.input সেট state.input
  3. এটিকে একটি onChange হিসাবে C1 এ onChange এবং C1 এটিকে bind করুন this.props.onChange Foo এর পরিবর্তনে পরিবর্তন করুন।

এইটা কাজ করে. যখনই Foo এর মান পরিবর্তিত হয়, এটি setState তে একটি setState ট্রিগার করে, তাই setState ইনপুটটি C2 এ পাস করতে হবে।

কিন্তু একই কারণে এটি বেশ সঠিক মনে হয় না: আমি একটি শিশু উপাদান থেকে একটি অভিভাবক উপাদান অবস্থা সেটিং করছি। এই প্রতিক্রিয়া নকশা নীতি বিশ্বাসঘাতকতা বলে মনে হয়: একক দিক তথ্য প্রবাহ।
আমি কিভাবে এটা করতে অনুমিত হয়, নাকি আরো প্রতিক্রিয়া-প্রাকৃতিক সমাধান আছে?

দ্বিতীয় সমাধান:

শুধু পি এ Foo করা।

কিন্তু আমার নকশাটি যখন আমি সর্বোচ্চ স্তরের ক্লাসের render সমস্ত ফর্ম উপাদানগুলি নির্বাণ করি তখন এটি কি একটি নকশা নীতি অনুসরণ করা উচিত?

আমার উদাহরণের মতো, যদি আমার C1 এর একটি বড় রেন্ডারিং থাকে, তবে আমি সত্যিই C1 এর পুরো render P ঠিক করতে চাই না কারণ C1 এর একটি ফর্ম উপাদান রয়েছে।

আমি কিভাবে এটা করা উচিত?


  1. সঠিক জিনিসটি হল অভিভাবক উপাদানতে রাষ্ট্র রাখা , রেফারেন্স এড়াতে এবং কী না
  2. একটি ক্ষেত্রে টাইপ করার সময় ক্রমাগত সব শিশুদের আপডেট এড়াতে হয়
  3. অতএব, প্রতিটি সন্তানের একটি কম্পোনেন্ট হওয়া উচিত (যেমন কোনও সঠিক কম্পোনেন্ট নয়) এবং প্রয়োগ করা উচিত কম্পোনেন্ট shouldComponentUpdate(nextProps, nextState)
  4. এই ভাবে, একটি ফর্ম ক্ষেত্রে টাইপ করার সময়, শুধুমাত্র যে ক্ষেত্র আপডেট

নীচের @bound থেকে পরবর্তী @bound ব্যবহার করে। @bound বাবেল babel-plugin-transform-decorators-legacy ব্যাবহারকারীরা BabelJS 6 এবং শ্রেণি-বৈশিষ্ট্যের babel-plugin-transform-decorators-legacy (টীকাটি অনুরূপ সদস্য কার্যগুলিতে এই মানটি সেট করে):

/*
© 2017-present Harald Rudell <[email protected]> (http://www.haraldrudell.com)
All rights reserved.
*/
import React, {Component} from 'react'
import {bound} from 'class-bind'

const m = 'Form'

export default class Parent extends Component {
  state = {one: 'One', two: 'Two'}

  @bound submit(e) {
    e.preventDefault()
    const values = {...this.state}
    console.log(`${m}.submit:`, values)
  }

  @bound fieldUpdate({name, value}) {
    this.setState({[name]: value})
  }

  render() {
    console.log(`${m}.render`)
    const {state, fieldUpdate, submit} = this
    const p = {fieldUpdate}
    return (
      <form onSubmit={submit}> {/* loop removed for clarity */}
        <Child name='one' value={state.one} {...p} />
        <Child name='two' value={state.two} {...p} />
        <input type="submit" />
      </form>
    )
  }
}

class Child extends Component {
  value = this.props.value

  @bound update(e) {
    const {value} = e.target
    const {name, fieldUpdate} = this.props
    fieldUpdate({name, value})
  }

  shouldComponentUpdate(nextProps) {
    const {value} = nextProps
    const doRender = value !== this.value
    if (doRender) this.value = value
    return doRender
  }

  render() {
    console.log(`Child${this.props.name}.render`)
    const {value} = this.props
    const p = {value}
    return <input {...p} onChange={this.update} />
  }
}

আপনাকে রেডক্স এবং রে্যাক্ট্যাকডক্স লাইব্রেরী শিখতে হবে। এটি আপনার রাজ্যের গঠন এবং এক দোকানে প্রপোজ করবে এবং আপনি পরে আপনার সামগ্রীগুলির মধ্যে এটি অ্যাক্সেস করতে পারবেন।


এখন একটি অ্যাপ্লিকেশন তৈরি করার জন্য প্রতিক্রিয়া ব্যবহার করে, আমি এই প্রশ্নে কিছু চিন্তা ভাগ করতে চাই, যা আমি অর্ধ বছর আগে জিজ্ঞাসা করেছিলাম।

আমি আপনি পড়তে সুপারিশ

প্রথম পোস্টটি আপনার প্রতিক্রিয়াযুক্ত অ্যাপ্লিকেশনটি কীভাবে গঠন করা উচিত তা বোঝার জন্য অত্যন্ত সহায়ক।

Flux প্রশ্নটি উত্তর দিচ্ছেন কেন আপনি আপনার প্রতিক্রিয়া অ্যাপটি এইভাবে গঠন করবেন (এটি কীভাবে গঠন করবেন তার বিরোধিতা করে)। প্রতিক্রিয়াটি কেবলমাত্র 50% সিস্টেমের সাথে এবং ফ্লক্সের সাথে আপনি সম্পূর্ণ ছবি দেখতে পান এবং তারা কীভাবে একটি সুসংগত সিস্টেম গঠন করে তা দেখুন।

প্রশ্ন ফিরে।

আমার প্রথম সমাধানের জন্য, হ্যান্ডলারটিকে বিপরীত দিকে যেতে দেওয়া সম্পূর্ণরূপে ঠিক আছে, কারণ তথ্য এখনও একক দিকের দিকে যাচ্ছে।

তবে, কোন হ্যান্ডলারকে P তে একটি সেটস্টেট ট্রিগার করা আপনার পরিস্থিতি অনুসারে সঠিক বা ভুল হতে পারে কিনা।

যদি অ্যাপ্লিকেশনটি একটি সাধারণ মার্কডাউন রূপান্তরকারী হয়, C1 কাঁচা ইনপুট এবং সি 2টি HTML আউটপুট হচ্ছে তবে C1 কে P তে একটি সেটস্টেট ট্রিগার করতে দেওয়া ঠিক আছে, তবে কেউ কেউ যুক্তি দিতে পারে যে এটি করার প্রস্তাবিত উপায় নয়।

তবে, অ্যাপ্লিকেশনটি যদি একটি টডো তালিকা থাকে তবে C1 নতুন টডডো তৈরির জন্য ইনপুট হচ্ছে, সিটিটি টিওডোর তালিকা HTML এ, আপনি সম্ভবত হ্যান্ডলারকে P- এর চেয়ে দুই স্তরের উপরে যেতে চান - dispatcher , যা store আপডেট করতে দেয় data store , যা তারপর পি থেকে তথ্য পাঠান এবং মতামত populate। যে ফ্লক্স নিবন্ধ দেখুন। এখানে একটি উদাহরণ: Flux - TodoMVC

সাধারণত, আমি dodo তালিকা উদাহরণ বর্ণিত উপায় পছন্দ। আপনি আপনার অ্যাপ্লিকেশন ভাল আছে কম রাষ্ট্র।


পিতামাতা থেকে সন্তানের এবং তথ্য বিপরীত তথ্য পাস ব্যাখ্যা করা হয়।

import React, { Component } from "react";
import ReactDOM from "react-dom";

// taken refrence from https://gist.github.com/sebkouba/a5ac75153ef8d8827b98

//example to show how to send value between parent and child

//  props is the data which is passed to the child component from the parent component

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    };
  }

  onUpdateParent = val => {
    this.setState({
      fieldVal: val
    });
  };

  render() {
    return (
      // To achieve the child-parent communication, we can send a function
      // as a Prop to the child component. This function should do whatever
      // it needs to in the component e.g change the state of some property.
      //we are passing the function onUpdateParent to the child
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br />
        <Child onUpdate={this.onUpdateParent} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} />
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldValChild: ""
    };
  }

  updateValues = e => {
    console.log(e.target.value);
    this.props.onUpdate(e.target.value);
    // onUpdateParent would be passed here and would result
    // into onUpdateParent(e.target.value) as it will replace this.props.onUpdate
    //with itself.
    this.setState({ fieldValChild: e.target.value });
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.updateValues}
          value={this.state.fieldVal}
        />
      </div>
    );
  }
}

class OtherChild extends Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props: {this.props.passedVal}
        <h5>
          the child can directly get the passed value from parent by this.props{" "}
        </h5>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));


প্রথম সমাধান, রাষ্ট্রকে মূল উপাদানগুলিতে রেখে , সঠিক । যাইহোক, আরো জটিল সমস্যাগুলির জন্য, আপনাকে কিছু রাষ্ট্র পরিচালন লাইব্রেরি সম্পর্কে চিন্তা করা উচিত, redux প্রতিক্রিয়া সহ সর্বাধিক জনপ্রিয় একটি।


সুতরাং, যদি আমি আপনাকে সঠিকভাবে বুঝতে পারছি, আপনার প্রথম সমাধানটি আপনার মূল উপাদানটিতে রাষ্ট্র পালন করছে বলে প্রস্তাব করছে? আমি প্রতিক্রিয়া নির্মাতাদের জন্য কথা বলতে পারি না, কিন্তু সাধারণত, আমি এটি সঠিক সমাধান হিসাবে খুঁজে পাই।

রাষ্ট্র বজায় রাখা এক কারণ (অন্তত আমি মনে করি) যে প্রতিক্রিয়া তৈরি করা হয়েছিল। আপনি যদি আপনার নিজস্ব রাষ্ট্রের প্যাটার্ন ক্লায়েন্ট পার্শ্বটি কোনও গতিশীল UI এর সাথে ডিল করার জন্য বাস্তবায়িত করেন যার মধ্যে অনেকগুলি নির্ভরশীল চলন্ত টুকরা থাকে, তবে আপনি প্রতিক্রিয়াটি পছন্দ করবেন, কারণ এটি অনেকগুলি রাষ্ট্র পরিচালনার ব্যথাকে কমিয়ে দেয়।

অনুক্রমের মধ্যে রাষ্ট্রকে আরো এগিয়ে রেখে এবং ইভেন্টের মাধ্যমে আপডেট করার মাধ্যমে, আপনার ডেটা প্রবাহটি এখনও অনেক বেশি নির্বিঘ্নে, আপনি কেবল রুট উপাদানগুলির ইভেন্টগুলিতে প্রতিক্রিয়া জানাচ্ছেন, আপনি সত্যিই দুটি উপায় বাঁধার মাধ্যমে তথ্যটি পাচ্ছেন না, আপনি রুট কম্পোনেন্টটিকে বলছেন যে "হেই, এখানে কিছু ঘটেছে, মানগুলি পরীক্ষা করে দেখুন" বা আপনি রাষ্ট্রের আপডেট করার জন্য শিশু উপাদানতে কিছু তথ্য রাষ্ট্রের কাছে প্রেরণ করছেন। আপনি C1 এ রাষ্ট্রটি পরিবর্তন করেছেন, এবং আপনি C2 এর বিষয়ে সচেতন হতে চান, তাই, রুট কম্পোনেন্ট এবং পুনরায় রেন্ডারিংয়ে রাষ্ট্র আপডেট করে, C2 এর প্রপগুলি এখন সিঙ্ক অবস্থায় রয়েছে কারণ মূলটি রুট কম্পোনেন্টে আপডেট হয়েছে এবং পাশ দিয়ে গেছে ।

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }
  render () {
    return (
      <div>
        <C1 onUpdate={this.onUpdate.bind(this)}/>
        <C2 data={this.state.data}/>
      </div>
    )
  }
  onUpdate (data) { this.setState({ data }) }
}

class C1 extends React.Component {
    render () {
      return (
        <div>
          <input type='text' ref='myInput'/>
          <input type='button' onClick={this.update.bind(this)} value='Update C2'/>
        </div>
      )
    }
    update () {
      this.props.onUpdate(this.refs.myInput.getDOMNode().value)
    }
})

class C2 extends React.Component {
    render () {
      return <div>{this.props.data}</div>
    }
})

ReactDOM.renderComponent(<Example/>, document.body)




reactjs