Какой вариант лучше всего подходит для создания нового экземпляра класса в функциональном компоненте React? - PullRequest
Новая
       52

Какой вариант лучше всего подходит для создания нового экземпляра класса в функциональном компоненте React?

0 голосов
/ 31 марта 2020

Общий вопрос о создании нового экземпляра класса в функциональном компоненте React. Я использую тон. js для проекта и приведенных здесь примеров, но актуален для всего.

Между вариантами A и B, какой шаблон является правильным? B - это то, что обычно можно увидеть, но если A неверно, почему? Кажется неэффективным, что при использовании useEffect выполняется первый рендеринг, а затем создается экземпляр. Итак, ваш код полон channels.current && doSomething(). Почему оно не может быть начальным значением useRef?

Если ссылка сохраняет свое значение после повторного рендеринга, необходимо ли использовать useEffect?

И если я хочу обновить значения (4,0) в какой-то момент, то вместо динамических значений c целесообразно создавать экземпляры класса в качестве начального значения useState, как в опции C?

A. В качестве useRef начальное значение 

const channels = useRef({
    channel01: new Tone.Channel(4, 0),
    channel02: new Tone.Channel(4, 0),
    channel03: new Tone.Channel(4, 0)
  });

B. используйтеEffect для запуска ref 

const channels = useRef(null);

useEffect(() => {
    channels.current = {
      channel01: new Tone.Channel(4, 0),
      channel02: new Tone.Channel(4, 0),
      channel03: new Tone.Channel(4, 0)
    }
  }, []);

C. Как использоватьState начальное значение 

const [channels, setChannels] = useState({
    channel01: new Tone.Channel(4, 0),
    channel02: new Tone.Channel(4, 0),
    channel03: new Tone.Channel(4, 0)
  })

1 Ответ

0 голосов
/ 31 марта 2020

Кажется, это вопрос, основанный на мнении, поэтому очевидно, что мнение каждого будет другим, но вот мои два цента. Использование useEffect без зависимостей, т. Е. Обычно один раз вызывается при монтировании, как правило, предпочтительнее для заполнения начальных данных, например, с сервера, так: 

useEffect(()=>{
        axios.get('http://yourserver.com/someendpoint')
            .then(res=>{
                if(res.status === 200){
                    setData(res.data);
                }
            })
            .catch(err=>console.log(err))
    },[]);

Разные фреймворки, конечно, теперь развиваются по-разному, как я использую next. js много, и в нем вы можете использовать что-то вроде getInitialProps (). Но идея примерно такая же.

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

Самое главное, разработчики React всегда соглашаются с этим соглашением, поэтому в случае, если ваш код окажется на чужом столе. Он / она будет дома с ним, если, скажем, использовал состояние для инициализации данных и использует Effect для получения исходных данных с сервера и т. Д. c. Опять же, это мнение, основанное на многолетней работе и работе с разработчиками реакции, которые следуют соглашениям. Приветствия:).

...