Никита Гущин

В рамках реакта выражения "обновлять только те компоненты, у которых изменились props" - это значит "проверять props в shouldComponentUpdate". По-другому никак. даже если вы сделаете List - контейнером, внутри него тоже выполняется такая проверка.

Но почему вы боитесь проверки props? Вся суть концепции (react+redux), что данные иммутабельны и проверка "что-то изменилось?" - это просто проверка по ссылкам (т.е. очень быстрая, никаких deepEquals).
Команда react'а предлагает официальный add-on shallowCompare:

shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

Я пока использую https://github.com/gaearon/react-pure-render . Делайте ваши "глупые" компоненты как PureRender и будет вам счастье.

Создаете реакт-элемент, который будет контейнером. После didMount работаете с DOM внутри этого компонента

class MyD3Component extends Component {
  componenDidMount() {
    ReactDOM.findDOMNode(this.refs.container) // для d3
  }
  
  render() {
    return <div ref="container" />
  }
}

Лучше все это делать через редьюсеры. Флаг открытия модального окна, id айтема - все там хранить. Только в 4м пункте в модалку можно передать dropId из state, а на закрытие окна повесить общий обработчик - dropItem(id).

Есть API для работы с children: https://facebook.github.io/react/docs/top-level-ap... . Так как children - это просто props, пробегайте рекурсивно по всему дереву и собирайте элементы:

function getChildren(children) {
  let elements = []
  if (!children) {
    return elements
  }

  React.Children.forEach(children, child => {
    elements = [ ...elements, child, ...getChildren(child.props.children) ]
  })

  return elements
}

Вам нужно слушать componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
  this.setState({ id: nextProps.id })
}

Плюс почитайте как не нужно использовать state: https://facebook.github.io/react/tips/props-in-get...

react-router поддерживает данный функционал из коробки - документация и пример приложения

Зависимостей, как правило нет. Но можно сделать вложенные редьюсеры:

const myReducer = combineReducers({ connectedReducer1, connectedReducer2 })

PS для форм используйте redux-form.

UPD1 При этом вы можете вручную вызывать вложенные редьюсеры:

function combinedReducer(state = initialState, action = {}) {
  switch(action.type) {
    case SOME_COMPLEX_ACTION:
      return {
         ...state,
         someProp: someOtherReducer(state.someProp, { type: OTHER_ACTION, payload: action.payload.something })
      }
    default:
      return {
         ...state,
         someProp: someOtherReducer(state.someProp)
      }
  }
}

Вам довольно сильно придется поменять структуру. Всю логику перенести в экшен креаторы, хранение стейт в редьюсеры. Компоненты сделать dumb + несколько контроллеров. Продумать селекторы, и т.д.

И в принципе, это другая (более строгая) концепция приложения. Но без redux (flux) никак.

Чтобы передать props из UserHome в NewPatient нужно чтобы последний был дочерним роутом первого:

В camelCase не стоит делать path - т.к. он регистронезависимый

<Router history={hashHistory}>
  <Route path="/" component={UserHome}>
    <Route  path="NewPatient" component={NewPatient}  />
  </Route>
</Router>

Тогда в UserHome надо делать так:

return (
  <div className="UserHome ">
    {this.props.children && React.cloneElement(this.props.children, {
      patientUr: this.state.patient_ur
    })}
  </div>
)

Вам нужно не внутри компонента с интервалом рендерить а снаружи перерисоввывать компонент, передавая разные props
Самый упрощенный вариант:

class MyContainer extends Component {
  constructor() {
    this.state = { nums: [] }
  }
  
  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState({
        nums: [
          ...this.state.nums,
          (this.state.nums[this.state.nums.length-1] || 0) + 1
        ],
      })
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    retrurn (
      <div>
       {this.state.nums.map((n, i) => (<b key={i}>Number is: {n}</b>)}
      </div>
    )
  }
}

С redux'ом это будет выглядеть вот так:
erikras.github.io/redux-form/#/examples/deep?_k=3m09yp

UPD1. Примерно так будет выглядеть. Но я бы фильтр списка работников поместил в select. Тогда вам нужно будет получать из стора значения формы и тоже самое делать + можно использовать reselect для оптимизации всего этого дела

UPD2. Я обновил код немного. Старая версия не работала...

class MyForm extends Component {
  render() {
    const { handleSubmit, fields: { workers }, workersList } = this.props
    const selectedWorkersIds = workers.map(workerField => workerField.value.id)
    const finalWorkersList = workersList.filter(
      worker => selectedWorkersIds.indexOf(worker.id) === -1
    )
    return (
      <form onSubmit={handleSubmit}>
        <WorkersMultiInput
          field={workers}
          workersList={finalWorkersList}
          />
      </form>
    )
  }
}

class WorkersMultiInput extends Component {
  render() {
    const { field, workersList } = this.props

    return (
      <div>
        {
           field.map((workerField, i) => {
             // Просто добавим в список выбранного воркера 
             const finalWorkerList = [ workerField.value, ...workersList ]            
             return (
               <WorkerInput key={i} field={workerField} workersList={finalWorkersList} />
             )
           }
        }
      </div>
    )
  }
}

Первый и второй вариант очень похожи. Преимущества перед третьим вариантом в том, что у вас метод будет забинден на this:

class ... {
  consoleLog = () => { 
    //Второй вариант объявления
    console.log('Второй вариант');
  }

  render() {
     return (
       <button onClick={this.consoleLog} type="button"> click me </button>
     )
  }
}

В первом и втором случае вы не потеряете this при передаче метода как callback в onClick.

Если вам нужно плавно скрыть элемент - CSSTransitionGroup вполне подойдет. Прочтите документацию - https://facebook.github.io/react/docs/animation.html (не вижу смысла здесь ее переписывать). В общем принцип работы таков - компонент CSSTransitionGroup сохранит элемент в DOM на время перехода (анимации) и сразу после ее завершения - удалит (если речь об удалении DOM).

Вот так у меня выглядит код для такого меню:

<CSSTransitionGroup transitionName="ProductCategoriesMenu--submenu-transition" transitionEnter={false}>
          {category.products.length && isCategorySelected ? this.renderSubMenu(category) : null}
        </CSSTransitionGroup>

.ProductCategoriesMenu--submenu-transition-leave {
  max-height: 1000px;
  overflow: hidden;
}

.ProductCategoriesMenu--submenu-transition-leave-active {
  max-height: 0;
  transition: max-height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

Это props компонента.

Вы банально теряете указатель на this:
<Input ... onChange={this.change}>

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

change = () => {
        console.log("WTF");
        this.setState({ open: !this.state.open })
    };

UPD1
Или биндите ее в конструкторе (равносильно методу выше, но это не удобно)

constructor(...args) {
        super(...args);
        this.state = {
            open: false,
            value: 'select'
        };
        this.change = this.change.bind(this)
    }

Ошибки?

Проверьте на что ссылается this. И вызов функции в параметрах по-умолчанию смотрится не к месту)
handleSubmit(data=this.getFormData()) {