Настройка реквизита, а не состояние, из AJAX? - Реагировать [дублировать]

Question

Настройка реквизита, а не состояние, из AJAX? - Реагировать [дублировать]

Идея CGI заключается в том, что программа / сценарий (независимо от того, Perl или даже C) получает вход через STDIN (данные запроса) и выводит данные через STDOUT (echo, printf statements). Причина, по которой большинство скриптов php не квалифицируется, заключается в том, что они выполняются в модуле PHP Apache.

317

javascript ajax reactjs

задан jnns 5 April 2016 в 10:21

23 ответа

В общем случае состояние одного компонента (родителя) является опорным для дочернего компонента.

Состояние находится в компоненте, где в качестве реквизита передается от родителя к дочернему.

Опоры, как правило, неизменяемы.

class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            name : "John",
        }
    }
    render() {
        return (
            <Child name={this.state.name}>
        )
    }
}

class Child extends React.Component {
    constructor() {
        super();
    }

    render() {
        return(
            {this.props.name} 
        )
    }
}

В приведенном выше коде у нас есть родительский класс (родительский), который имеет имя как его состояние, которое передается дочернему компоненту (класс Child) в качестве опоры и дочернего компонент отображает его с помощью {this.props.name}

0

ответ дан Abhijit 17 August 2018 в 20:37

Состояние

- это специальное изменяемое свойство, которое содержит данные Компонента. он имеет значение по умолчанию при установке компонентов.

реквизит - это особое свойство, неизменное по своей природе и используемое в случае прохождения по значению от родителя к ребенку. реквизиты - это всего лишь канал связи между Компонентами, всегда движущийся от вершины (родительский) к buttom (дочерний).

ниже - полный пример объединения состояния & amp; реквизит: -

<!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>

1

ответ дан Ajay 17 August 2018 в 20:37

Опоры просто сокращают свойства. Опоры - это то, как компоненты общаются друг с другом. Если вы вообще знакомы с React, вы должны знать, что реквизит протекает вниз от родительского компонента.

Также существует случай, когда вы можете иметь реквизиты по умолчанию, чтобы реквизиты были установлены, даже если родительский компонент не пропускает реквизит вниз.

Вот почему люди ссылаются на React как на однонаправленный поток данных. Это немного касается вашей головы, и я, вероятно, буду писать об этом позже, но на данный момент просто помню: данные передаются от родителя к ребенку. Опоры неизменны (фантастическое слово, чтобы оно не менялось)

Итак, мы счастливы. Компоненты получают данные от родителя. Все отсортировано, правда?

Ну, не совсем. Что происходит, когда компонент получает данные от кого-то другого, кроме родителя? Что делать, если пользователь вводит данные непосредственно в компонент?

Ну, вот почему у нас есть состояние.

STATE

Опоры не должны меняться, поэтому состояние поднимается вверх. Обычно компоненты не имеют состояния и поэтому называются апатридами. Компонент, использующий состояние, известен как stateful. Не стесняйтесь бросать этот маленький лакомый кусочек на вечеринках и смотреть, как люди уходят от вас.

Таким образом, состояние используется, чтобы компонент мог отслеживать информацию между любыми рендерами, которые он делает. Когда вы устанавливаетеState, он обновляет объект состояния, а затем повторно отображает компонент. Это супер круто, потому что это означает, что «Реакт» заботится о тяжелой работе и невероятно быстро.

. В качестве небольшого примера состояния, вот фрагмент из строки поиска (стоит проверить этот курс, если вы хотите чтобы узнать больше о 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);
 }
}

РЕЗЮМЕ

Реквизиты и государство выполняют похожие вещи, но используются по-разному. Большинство ваших компонентов, вероятно, будут апатридом.

Опоры используются для передачи данных от родителя к ребенку или самому компоненту. Они неизменяемы и, следовательно, не будут изменены.

Состояние используется для изменяемых данных или данных, которые будут меняться. Это особенно полезно для ввода пользователем. Например, подумайте о барах поиска. Пользователь будет вводить данные, и это обновит то, что они видят.

1

ответ дан AJEET SINGH 17 August 2018 в 20:37

реквизиты (short для «properties») и состояние - это обычные объекты JavaScript. Хотя оба содержат информацию, которая влияет на вывод рендера, они различаются одним важным способом: реквизит передается компоненту (аналогично параметрам функции), тогда как состояние управляется внутри компонента (подобно переменным, объявленным внутри функции).

Таким образом, просто состояние ограничено вашим текущим компонентом, но реквизит может быть передан любому компоненту, который вы хотите ... Вы можете передать состояние текущего компонента в качестве поддержки другим компонентам ...

Также в React у нас есть компоненты без состояния, у которых есть только реквизит, а не внутреннее состояние ...

Пример ниже показывает, как они работают в вашем приложении:

Родитель ( state-full component):
class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}
Ребенок (компонент без учета состояния):
const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

4

ответ дан Alireza 17 August 2018 в 20:37

Реквизит vs state summary Мне нравится лучше всего здесь: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md Большая подсказка для шляпы эти ребята. Ниже приведен отредактированный вариант этой страницы:

props vs state

tl; dr Если компоненту необходимо изменить один из его атрибутов в какой-то момент времени, этот атрибут должен быть частью его состояния, иначе он должен быть просто опорой для этого Компонента.

реквизит

Опоры (short для свойств) являются конфигурацией компонента. Они получены сверху и неизменны, если речь идет о Компоненте, принимающем их. Компонент не может изменить свои реквизиты, но он отвечает за объединение реквизитов своих дочерних Компонентов.

state

Состояние - это структура данных, которая начинается со значения по умолчанию, когда компонент монтируется в качестве реквизита. , Он может быть изменен во времени, главным образом в результате пользовательских событий.

Компонент управляет своим собственным внутренним состоянием. Помимо установки начального состояния, у него нет бизнеса, играющего с состоянием его детей. Вы можете концептуализировать состояние как личное для этого компонента.

Изменение реквизита и состояния

                                                   props   state
    Can get initial value from parent Component?    Yes     Yes
    Can be changed by parent Component?             Yes     No
    Can set default values inside Component?*       Yes     Yes
    Can change inside Component?                    No      Yes
    Can set initial value for child Components?     Yes     Yes
    Can change in child Components?                 Yes     No

Обратите внимание, что и реквизиты, и начальные значения состояния, полученные от родителей, переопределяют значения по умолчанию, определенные внутри Компонент.

Если этот компонент имеет состояние?

Состояние является необязательным. Поскольку состояние увеличивает сложность и снижает предсказуемость, предпочтительным является компонент без состояния. Несмотря на то, что вы явно не можете обойтись без состояния в интерактивном приложении, вам следует избегать слишком большого количества компонентов состояния.

Типы компонентов

Безстоящий компонент Только реквизиты, состояние отсутствует. С функцией render () не так много происходит. Их логика вращается вокруг реквизита, который они получают. Это делает их очень легкими для наблюдения и проверки.

Компонент состояния. Оба реквизита и состояние. Они используются, когда ваш компонент должен сохранять определенное состояние. Это хорошее место для взаимодействия клиент-сервер (XHR, веб-сокеты и т. Д.), Обработки данных и реагирования на пользовательские события. Такие логистики должны быть инкапсулированы в умеренное количество компонентов Stateful, в то время как вся логика визуализации и форматирования должна перемещаться вниз по потоку во многие компоненты без учета состояния.

sources

32

ответ дан broc.seib 17 August 2018 в 20:37

1

что вы подразумеваете под «начальным значением состояния, полученным от родителя» ?? Насколько я знаю, состояние определяется только в рамках одного компонента и не может быть напрямую изменено извне. – Maxim Kuzmin 25 August 2017 в 19:33

Состояние - это способ реагирования на информацию, содержащуюся в вашем компоненте.

Предположим, что у вас есть компонент, который должен получать некоторые данные с сервера. Обычно вы хотите проинформировать пользователя, если запрос обрабатывается, если он потерпел неудачу и т. Д. Это часть информации, которая подходит только для этого конкретного компонента. Это - то, где государство входит в игру.

Обычно лучший способ определить состояние выглядит следующим образом:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

, но в реализациях latests реагировать native вы можете просто сделать:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

Эти два примера выполняются точно так же, это просто улучшение синтаксиса.

Итак, что отличается от того, как просто использовать атрибуты объектов, как мы всегда имеем в программировании OO? Обычно информация, хранящаяся в вашем состоянии, не должна быть статичной, она со временем изменится, и вам необходимо будет обновить View, чтобы отразить эти изменения. Государство предлагает эту функцию простым способом.

State IS MEANT TO IN INTUTABLE! и я не могу сделать этого достаточно. Что это значит? Это означает, что вы НИКОГДА не должны делать что-то вроде этого.

 state.key2 = newValue;

Правильный способ сделать это:

this.setState({ key2: newValue });

Использование this.setState ваш компонент запускается через цикл обновления и если какая-либо часть состояния изменится, ваш метод визуализации Component будет вызван снова, чтобы отразить это изменение.

Проверьте реакционные документы для еще более расширенного объяснения: https: //facebook.github .io / реагируют / документы / состояние и-lifecycle.html

1

ответ дан Cody Gray 17 August 2018 в 20:37

Это моя текущая точка зрения относительно объяснения между состоянием и реквизитом

Состояние похоже на вашу локальную переменную внутри вашего компонента. Вы можете манипулировать значением состояния, используя заданное состояние. Затем вы можете передать значение состояния вашему дочернему компоненту.
Реквизиты - это значение, которое точно расположено внутри вашего магазина redux, это фактически происходит из состояния, которое было создано из редуктора. Ваш компонент должен быть подключен к сокращению, чтобы получить значение от реквизита. Вы также можете передать свое значение реквизита вашему дочернему компоненту

0

ответ дан Faris Rayhan 17 August 2018 в 20:37

Для связи между родителем и ребенком просто передайте реквизиты.

Используйте состояние для хранения данных, которые ваша текущая страница нуждается в вашем представлении контроллера.

Использовать опоры для передачи данных и amp; обработчиков событий до ваших дочерних компонентов.

Эти списки должны помочь вам при работе с данными в ваших компонентах.

Props

являются неизменяемыми, что позволяет React выполнять быстрые проверки ссылок
используются для передачи данных с вашего контроллера вида на ваш компонент верхнего уровня
имеют более высокую производительность, чтобы передавать данные дочерним компонентам

Состояние

должно управляться в вашем контроллере просмотра вашего верхнего уровня Компонент
изменен
имеет худшую производительность
не должен быть доступен из дочерних компонентов, передавая его с помощью реквизита вместо этого

Для связи между двумя компонентами, не имеющими отношения родитель-потомок, вы можете настроить свою собственную глобальную систему событий. Подпишитесь на события в componentDidMount (), отмените подписку в компонентеWillUnmount () и вызовите 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-сериализуемыми. При создании компонента с состоянием, подумайте о минимально возможном представлении его состояния и сохраните только те свойства в этом состоянии. Внутри render () просто вычислите любую другую информацию, которая вам нужна, основываясь на этом состоянии. Вы обнаружите, что думать и писать приложения таким образом, как правило, приводит к наиболее правильному приложению, поскольку добавление избыточных или вычисленных значений в состояние означает, что вам необходимо явно синхронизировать их, а не полагаться на React, вычисляя их для вас. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

142

ответ дан jwpfox 17 August 2018 в 20:37

1

не согласен, все реквизиты на самом деле менее эффективны для передачи данных вниз. Просто установите хранилище для дочерних компонентов, тогда вам не нужно иметь дело с беспорядком реквизита, и когда реквизит изменится, вы должны обновить свои компоненты. Просто обновите свой магазин и позвольте компоненту получить свои данные из своего магазина. – PositiveGuy 17 July 2016 в 06:07
2

Все в моих ответах прямо из реакционной документации ... – BentOnCoding 17 July 2016 в 16:14
3

Можете ли вы сказать мне, почему реквизит больше производительности, чем государства. Благодарю. – hqt 18 December 2017 в 19:13

В ответ на исходный вопрос о неизменяемости реквизита они называются неизменяемыми в отношении дочернего компонента , но могут быть изменены в родительском.

0

ответ дан Lucy Mac 17 August 2018 в 20:37

Большинство ответов путают Beginners, скорее уточняя. Очень сложно общаться и понимать. Вы можете понять это, связав его с Plain JS.

Простыми словами,

Состояние ссылается на локальное состояние компонента, к которому нельзя получить доступ и изменить вне компонента и только могут быть использованы & amp; модифицированный внутри компонента.

Обычная JS
const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}
Реакция JS Эквивалент
class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }
Опоры на с другой стороны, сделать компоненты повторно используемыми, предоставив компонентам возможность получать данные из родительского компонента в виде реквизита.

Plain 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- состояние VS-реквизита-объяснены-51beebd73b21

8

ответ дан mkarrfan 17 August 2018 в 20:37

В основном разница состоит в том, что состояние является чем-то вроде атрибутов в ООП: это нечто локальное для класса (компонента), используемого для лучшего описания. Реквизиты похожи на параметры - они передаются компоненту из вызывающего компонента (родителя): как если бы вы вызывали функцию с определенными параметрами.

4

ответ дан Nesha Zoric 17 August 2018 в 20:37

В основном, реквизиты и состояние - это два способа, которыми компонент может знать, что и как визуализировать. Какая часть состояния приложения принадлежит государству и которая принадлежит некоторому магазину верхнего уровня, больше связана с дизайном вашего приложения, чем с тем, как работает React. Самый простой способ решения - ИМО - подумать, полезен ли этот конкретный фрагмент для приложения в целом или какая-то локальная информация. Кроме того, важно не дублировать состояние, поэтому, если какой-либо фрагмент данных можно вычислить из реквизита - он должен рассчитываться из реквизита.

Например, предположим, что у вас есть элемент управления выпадающим списком (который включает стандартный HTML-выбор для пользовательского стиля), который может: a) выбрать какое-либо значение из списка и b) открыть или закрыть (т. е. список опций, отображаемый или скрытый). Теперь предположим, что ваше приложение отображает список элементов определенного типа и ваш фильтр выпадающего списка для записей списка. Тогда было бы лучше передать значение активного фильтра в качестве опоры и сохранить открытое / закрытое состояние локально. Кроме того, чтобы сделать его функциональным, вы должны передать обработчик onChange из родительского компонента, который будет вызываться внутри элемента выпадающего списка и немедленно отправить обновленную информацию (новый выбранный фильтр) в магазин. С другой стороны, открытое / закрытое состояние может храниться внутри выпадающего компонента, потому что остальная часть приложения действительно не заботится о том, открыт ли элемент управления, пока пользователь не изменит его значение.

Следующий код не полностью работает, ему нужны css и обработка выпадающего списка щелчков / размытие / изменение событий, но я хотел бы сохранить пример минимальным. Надеюсь, что это поможет понять разницу.

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')
);

1

ответ дан nilo de roock 17 August 2018 в 20:37

Опоры: реквизит - это не что иное, как свойство компонента и компонента реакции - это не что иное, как функция javascript.

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

const element =;

здесь <Welcome name="Sara" /> передача объекта {name: 'Sara'} как реквизит компонента Welcome. Для передачи данных из одного родительского компонента в дочерний компонент мы используем реквизиты. Реквизит неизменен. Во время жизненного цикла компонента реквизиты не должны меняться (считайте их неизменяемыми).

Состояние: состояние доступно только внутри Компонента. Чтобы отслеживать данные внутри компонента, мы используем состояние. мы можем изменить состояние с помощью setState. Если нам нужно передать состояние ребенку, мы должны передать его как реквизит.

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

1

ответ дан Poulima Biswas 17 August 2018 в 20:37

React Components используют состояние для READ / WRITE для внутренних переменных, которые могут быть изменены / мутированы, например:

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

Реактивный реквизит - это специальный объект, который позволяет программисту получать переменные и методы из родительского компонента в дочерний компонент.

Это что-то вроде Windows и дверей дома. Реквизиты также неизменяемы. Детский компонент не может изменять / обновлять их.

Существует несколько методов, которые помогают слушать, когда реквизит изменяется с помощью родительского компонента.

0

ответ дан Stephen Rauch 17 August 2018 в 20:37

Как состояние, так и реквизит в реакции используются для управления данными в компоненте, обычно реквизиты устанавливаются родителем и передаются дочерним компонентам, и они фиксируются по всему компоненту. Для данных, которые будут меняться, мы должны использовать состояние. И реквизиты неизменяемы, в то время как состояния изменяемы, если вы хотите изменить реквизит, который вы можете сделать из родительского компонента, а затем передать его дочерним компонентам.

3

ответ дан Vivek Mehta 17 August 2018 в 20:37

0

ответ дан Akanksha gore 6 September 2018 в 13:14

0

ответ дан lsa4299 6 September 2018 в 13:14

0

ответ дан user3775501 6 September 2018 в 13:14

0

ответ дан Akanksha gore 29 October 2018 в 19:41

1

ответ дан Amruth LS 29 October 2018 в 19:41

0

ответ дан esewalson 29 October 2018 в 19:41

0

ответ дан user3775501 29 October 2018 в 19:41

Другие вопросы по тегам:

javascript ajax reactjs

Настройка реквизита, а не состояние, из AJAX? - Реагировать [дублировать]

23 ответа

props vs state

реквизит

state

Изменение реквизита и состояния

Если этот компонент имеет состояние?

Типы компонентов

sources

Похожие вопросы: