Как использовать React Hooks для рефакторинга существующего кода? - PullRequest
Новая
       5

Как использовать React Hooks для рефакторинга существующего кода?

0 голосов
/ 27 февраля 2019

Я смотрел на функции React Hooks и у меня возникли некоторые сомнения по поводу того, как точно использовать useState и useEffect для рефакторинга существующего кода.

У меня есть, например, компонент старой школы, подобный этому: 

class MyFunction extends React.Component{
  state = {
    count1: 0,
    count2: 0
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {count1: nextProps.value1, count2: nextProps.value2}
  }

  handleChange1 = ({target: {value}}) => {
    this.setState({count1: value});
    this.props.onCount1Change(value);
  }

  handleChange2 = ({target: {value}}) => {
    this.setState({count2: value});
    this.props.onCount2Change(value);
  }

  componentDidUpdate(){
    this.props.someRandomStuffs(this.state.count1, this.state.count2);
  }

  render(){
    return (
      <div>
        <input type="text" value={this.state.count1} onChange={this.handleChange1} />
        <input type="text" value={this.state.count2} onChange={this.handleChange2} />
      </div>
    )
  }
}

Итак, я приготовил решение для его рефакторинга следующим образом.

function MyFunction(value1, value2, onCount1Change, onCount2Change, someRandomStuffs){
  const [count1, setCount1] = useState(value1);
  const [count2, setCount2] = useState(value2);

  useEffect(() => someRandomStuffs(count1, count2));

  function on1Change ({target: {value}}){
    setCount1(value);
    onCount1Change(value);
  }

  function on2Change ({target: {value}}){
    setCount2(value);
    onCount2Change(value);
  }

  return(
    <div>
      <input type="text" value={count1} onChange={on1Change} />
      <input type="text" value={count2} onChange={on2Change} />
    </div>
  );
}

Достаточно ли близок рефакторинг?Я хотел бы знать, можно ли это сделать для рефакторинга других классов в моем проекте.

1 Ответ

0 голосов
/ 11 апреля 2019

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

const myFunction = (props) => {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)

  const handleChange1 = ({ target: { value } }) => {
    setCount1(value)
    props.onCount1Change(value)
  }

  const handleChange2 = ({ target: { value } }) => {
    setCount2(value)
    props.onCount2Change(value)
  }

  useEffect(() => {
    props.someRandomStuffs(count1, count2);
  }, [])

  return (
    <div>
      <input type="text" value={count1} onChange={handleChange1} />
      <input type="text" value={count2} onChange={handleChange2} />
    </div>
  )
}
...