[javascript] ما هو الفرق بين الدولة والدعائم في React؟



6 Answers

للاتصال بين الوالدين والطفل ، ببساطة تمرير الدعائم.

استخدم الحالة لتخزين البيانات التي تحتاجها صفحتك الحالية في عرض وحدة التحكم.

استخدم الدعائم لتمرير معالجات الأحداث والبيانات إلى مكونات طفلك.

يجب أن تساعد هذه القوائم في إرشادك عند التعامل مع البيانات في المكونات الخاصة بك.

الدعائم

  • هي غير قابلة للتغيير
    • والذي يتيح لك إجراء مراجعة سريعة للمراجع
  • تُستخدم لتمرير البيانات من وحدة التحكم في العرض
    • مكون المستوى الأعلى الخاص بك
  • لديك أداء أفضل
    • استخدم هذا لتمرير البيانات إلى مكونات تابعة

حالة

  • ينبغي أن تدار في جهاز تحكم العرض الخاص بك
    • مكون المستوى الأعلى الخاص بك
  • هو قابل للتغيير
  • لديه أداء أسوأ
  • لا يمكن الوصول إليها من المكونات الفرعية
    • تمريرها مع الدعائم بدلا من ذلك

للتواصل بين عنصرين لا يوجد بينهما علاقة بين الوالدين والطفل ، يمكنك إعداد نظام الحدث العالمي الخاص بك. اشترك في الأحداث في componentDidMount () ، إلغاء الاشتراك في componentWillUnmount () ، واستدعاء setState () عندما تتلقى حدثًا. نمط التدفق هي واحدة من الطرق الممكنة لترتيب هذا. - https://facebook.github.io/react/tips/communicate-between-components.html

ما مكونات يجب أن يكون لديك دولة؟

يجب أن تأخذ معظم مكوناتك ببساطة بعض البيانات من الدعائم وتجعلها. ومع ذلك ، في بعض الأحيان تحتاج إلى الاستجابة لإدخال المستخدم أو طلب الخادم أو مرور الوقت. لهذا تستخدم الدولة.

حاول أن تحتفظ بأكبر قدر ممكن من مكوناتك عديمة الحالة . من خلال القيام بذلك ، ستقوم بفصل الحالة إلى مكانها الأكثر منطقية وتقليل التكرار ، مما يسهل التفكير في طلبك.

النمط الشائع هو إنشاء العديد من المكونات عديمة الحالة التي تقوم فقط بجمع البيانات ، ولها مكونات حتمية فوقها في التسلسل الهرمي الذي يمرر حالتها إلى أبنائها عبر الدعائم. يقوم العنصر الحنيف بتغليف كل منطق التفاعل ، بينما تهتم المكونات عديمة الحالة بتقديم البيانات بطريقة تعريفية. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

ماذا يجب أن تذهب في الدولة؟

يجب أن تحتوي الولاية على بيانات قد يتغير بها معالجي أحداث المكون لتشغيل تحديث واجهة المستخدم. في التطبيقات الحقيقية ، تميل هذه البيانات إلى أن تكون صغيرة جدًا و JSON-serializable. عند بناء عنصر مؤثر ، فكر في الحد الأدنى من التمثيل الممكن لحالتها ، ولا تخزن سوى تلك الخصائص في هذه الدولة. داخل render () ببساطة حساب أي معلومات أخرى تحتاج إليها استناداً إلى هذه الحالة. ستجد أن التفكير في التطبيقات وكتابتها بهذه الطريقة يميل إلى الوصول إلى التطبيق الأكثر صحة ، بما أن إضافة قيم مكررة أو محسوبة إلى الحالة يعني أنك تحتاج إلى الاحتفاظ بها بشكل متزامن بشكل صريح بدلاً من الاعتماد على تفاعلها الحسابي لك. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Question

كنت أشاهد دورة Pluralsight على رد الفعل وذكر المدرب أن الدعائم لا ينبغي تغييرها. أنا الآن قراءة مقال (uberVU / رد-دليل) على الدعائم مقابل الدولة وتقول

تؤدي كل من التغييرات في الدعائم والدولة إلى تحديث التطبيق.

في وقت لاحق في المادة تقول:

الدعائم (اختصار للمواقع) هي تكوين مكون ، خياراتها إذا سمحتم. وردت من فوق وغير قابل للتغيير.

  • لذلك يمكن أن تتغير الدعائم ولكن يجب أن تكون غير قابلة للتغيير؟
  • متى يجب استخدام الدعائم ومتى يجب عليك استخدام الدولة؟
  • إذا كانت لديك بيانات يحتاجها مكون React ، فهل يجب أن يتم تمريرها عبر الدعائم أو الإعداد في مكون getInitialState عبر getInitialState ؟



React Components تستخدم الحالة READ / WRITE للمتغيرات الداخلية التي يمكن تغييرها / تحورها على سبيل المثال:

this.setState({name: 'Lila'})

الدعائم React هو كائن خاص تسمح للمبرمج الحصول على متغيرات وأساليب من "مكون الأصل" في مكون تابع.

انها شيء مثل ويندوز وأبواب المنزل. الدعائم هي أيضا غير قابل للتغيير مكون الطفل يمكن تغيير / تحديثها.

هناك طريقتان تساعدان في الاستماع عند تغيير الدعائم بواسطة المكون الرئيسي.




معظم الأجوبة مربكة إلى حد ما توضيح. من الصعب جدا أن نفهم ونفهم. يمكنك فهم ذلك من خلال ربطها بـ Plain JS.

بكلمات بسيطة ،

يتم الإشارة إلى الحالة المحلية للمكون الذي لا يمكن الوصول إليه وتعديله خارج المكون ويمكن فقط استخدامه وتعديله داخل المكون.

سهل JS

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

React JS Equivalent

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

من ناحية أخرى ، فإن الدعائم تجعل المكونات قابلة لإعادة الاستخدام عن طريق إعطاء المكونات القدرة على استقبال البيانات من المكون الرئيسي في شكل الدعائم.

سهل JS

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}
DummyFunction('Manoj');
DummyFunction('Ajay');

React JS

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

الاعتمادات: https://medium.com/@manojsinghnegi

المقالة Linke: https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21




أساسا ، والدعائم والدولة بطريقتين يمكن للمكون معرفة ما وكيف لتقديم. أي جزء من حالة التطبيق ينتمي إلى الحالة وأيها إلى بعض المتاجر ذات المستوى الأعلى ، يرتبط بشكل أكبر بتصميم تطبيقك ، من كيفية عمل React. إن أبسط طريقة لاتخاذ قرار ، المنظمة البحرية الدولية ، هو التفكير ، ما إذا كانت هذه البيانات معينة مفيدة للتطبيق ككل ، أو أنها بعض المعلومات المحلية. من المهم أيضًا عدم تكرار الحالة ، لذلك إذا كان من الممكن حساب بعض البيانات من الدعائم ، فيجب أن يتم حسابها من الدعائم.

على سبيل المثال ، لنفترض أن لديك بعض التحكم في القائمة المنسدلة (الذي يختار HTML القياسي لتحديد التصميم المخصص) ، والتي يمكن أ) اختيار بعض القيمة من القائمة ، و ب) أن يتم فتحها أو إغلاقها (أي ، قائمة الخيارات المعروضة أو المخفية). لنفترض الآن أن تطبيقك يعرض قائمة بعناصر من نوع ما ومن فلتر عناصر التحكم المنسدلة لإدخالات القائمة. بعد ذلك ، من الأفضل تمرير قيمة الفلتر النشطة كدعم ، والحفاظ على حالة فتح / إغلاق محلية. ولجعله فعالاً ، ستقوم بتمرير معالج onChange من المكون الأصلي ، والذي سيُطلق عليه عنصر المنسدلة الداخلي وإرسال معلومات محدثة (مرشح جديد محدد) إلى المتجر على الفور. من ناحية أخرى ، يمكن أن تظل الحالة المفتوحة / المغلقة داخل عنصر القائمة المنسدلة ، لأن بقية التطبيق لا يهتم حقًا إذا تم فتح التحكم ، حتى يقوم المستخدم بتغيير قيمته بالفعل.

لا تعمل التعليمة البرمجية التالية تمامًا ، بل تحتاج إلى css والتعامل مع أحداث clickdown / blur / change المنسدلة ، ولكني أردت الحفاظ على الحد الأدنى من المثال. آمل أن يساعد على فهم الفرق.

const _store = {
    items: [
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three', new: true },
    { id: 4, label: 'Four', new: true },
    { id: 5, label: 'Five', important: true },
    { id: 6, label: 'Six' },
    { id: 7, label: 'Seven', important: true },
    ],
  activeFilter: 'important',
  possibleFilters: [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'important', label: 'Important' }
  ]
}

function getFilteredItems(items, filter) {
    switch (filter) {
    case 'all':
        return items;

    case 'new':
        return items.filter(function(item) { return Boolean(item.new); });

    case 'important':
        return items.filter(function(item) { return Boolean(item.important); });

    default:
        return items;
  }
}

const App = React.createClass({
  render: function() {
    return (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);



يتم استخدام كل من الدعائم والدولة للتحكم في البيانات في مكون ، يتم تعيين الدعائم بشكل عام من قبل الأم وتنتقل إلى مكونات الطفل ويتم إصلاحها في جميع أنحاء المكون. للبيانات التي سوف تتغير ، يتعين علينا استخدام الدولة. والدعائم غير قابلة للتغيير بينما تكون الحالات قابلة للتغيير ، إذا كنت ترغب في تغيير الدعائم التي يمكنك القيام بها من المكون الرئيسي ثم تمريرها إلى المكونات الفرعية.




الدعائم ببساطة هي الاختزال عن العقارات. الدعائم هي كيف تتحدث المكونات مع بعضها البعض. إذا كنت على دراية بـ React فعليك معرفة أن الدعائم تتدفق لأسفل من المكون الرئيسي.

هناك أيضًا الحالة التي يمكنك فيها استخدام الدعامات الافتراضية بحيث يتم تعيين الدعائم حتى إذا لم يقم المكون الأساسي بتمرير الدعائم.

هذا هو السبب في أن الناس يشيرون إلى React على أنها تحتوي على تدفق بيانات أحادي الاتجاه. يأخذ هذا الأمر بعضًا من التساؤل ، وسأحاول على الأرجح تدوين ذلك في وقت لاحق ، ولكن الآن تذكر فقط: تتدفق البيانات من الوالد إلى الطفل. الدعائم غير قابلة للتغيير (كلمة خيالية لا تتغير)

لذلك نحن سعداء. المكونات تتلقى البيانات من الأم. كل الفرز ، أليس كذلك؟

كذلك ليس تماما. ماذا يحدث عندما يتلقى عنصر البيانات من شخص آخر غير الوالدين؟ ماذا لو قام المستخدم بإدخال البيانات مباشرة إلى المكون؟

حسنا ، هذا هو السبب في أن لدينا دولة.

حالة

لا ينبغي أن يتغير الدعائم ، لذلك خطوات الدولة. عادة لا يكون للمكونات حالة ويتم الإشارة إليها باعتبارها عديمة الحالة. يعرف المكون الذي يستخدم الحالة باسم stateful. لا تتردد في إسقاط هذا الشيء الصغير في الحفلات ومشاهدة الناس بعيدًا عنك.

لذلك يتم استخدام الحالة بحيث يمكن لمكون أن يتتبع المعلومات بين أي عرض يجريه. عند تعيينState فإنه يقوم بتحديث كائن الحالة ثم re-renders المكون. هذا رائع للغاية لأن هذا يعني أن React يهتم بالعمل الشاق وبسرعة مذهلة.

كمثال بسيط على الحالة ، هنا مقتطف من شريط البحث (يستحق التحقق من هذه الدورة التدريبية إذا كنت تريد معرفة المزيد عن React)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

ملخص

تقوم الدعائم والدولة بأشياء مشابهة ولكن يتم استخدامها بطرق مختلفة. قد تكون غالبية مكوناتك عديمة الحالة.

تستخدم الدعائم لتمرير البيانات من الوالد إلى الطفل أو عن طريق المكون نفسه. هم غير قابل للتغيير ، وبالتالي لن يتم تغييرها.

تُستخدم الحالة للبيانات القابلة للتغيير أو البيانات التي ستتغير. هذا مفيد بشكل خاص لإدخال المستخدم. أعتقد أشرطة البحث على سبيل المثال. سيكتب المستخدم البيانات وسيعمل هذا على تحديث ما يشاهده.




state - هي خاصية خاصة قابلة للتغيير تحتوي على بيانات مكون. يحتوي على القيمة الافتراضية عند تركيب مكون.

الدعائم - هي خاصية خاصة غير قابلة للتغيير من الطبيعة وتستخدم في حالة مرور القيمة من الوالد إلى الطفل. الدعائم هي مجرد قناة communation بين المكونات ، تتحرك دائما من أعلى (الأم) إلى buttom (الطفل).

أدناه مثال كامل على دمج الدولة والدعائم: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ `taco-${ index }` }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>



Related