React我應該保持一個本地狀態的功能

Question

從來沒有真正做過這樣的事情，並且找不到有關它的大量信息，但是在組件的本地狀態中存儲函數引用是不是很糟糕？

class Foo extends React.Component{
    this.state = {
      exampleFunction: () => {}
    }
}

它將被傳遞到另一個組件，其中該組件可以更改此功能的功能。

// bar.js component

handleChange = (newFunction) => {
  const { exampleFunction } = this.props;
  this.setState({ exampleFunction: newFunction });
}

如果這很糟糕，應該做些什么呢？ 這不是redux商店，只是反應當地的狀態。

Answer 1

我只是想着你在嘗試什么，我認為它實際上並沒有按你的想法行事。 當你將函數傳遞給子this.setState ，並且調用this.setState它沒有設置父組件的狀態，它正在改變子組件的狀態。 所以你並沒有真正改變這個功能。 道具也是只讀的，所以我認為你不能重新分配它們。

class Parent extends Component {
  state = { visible: true };

  render() {
    const { visible } = this.state;
    return <Child visible={visible} />;
  }
}

class Child extends Component {
  // props.visible = true
  onChange = () => {
    this.setState({ visible: false });
    // props.visible is still true here, child has it's own state
  }
}

上面的代碼演示了這一點，當在子節點中調用onChange時，來自父節點的props.visible仍然是真的，因為子組件具有它自己的狀態。 所以你的功能也會發生同樣的事情。 有一種方法可以做到這一點，看看下面的代碼：

class Parent extends Component {
  dynamicFunction = () => {};

  setDynamicFunction(newFunc) {
    this.dynamicFunction = newFunc;
  }

  render() {
    return <Child setDynamicFunction={this.setDynamicFunction} />;
  }
}

class Child extends Component {
  onSomeEvent = () => {
    this.props.setDynamicFunction(newFunction);
  }
}

如果您只想更新父級的動態函數並僅在父級中使用它，您可以執行上面所做的操作，但如果您希望孩子知道動態函數何時發生更改，則需要移動從類到狀態的動態函數，這樣，當你改變動態函數時，它會導致子進行重新渲染，並且它會將新設置的動態函數作為prop傳遞下來

Answer 2

如果要將方法傳遞給深層嵌套組件，則可能需要查看React Context API。
請參閱文章， 從嵌套組件更新上下文 。

僅僅為了將子方法鑽入子組件而使用Redux是一種過度殺傷力。

實際上，React文檔將方法傳遞給子組件。
下面是從提到的文檔中復制的代碼

使用toggleTheme的空實現創建上下文。

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

然后消費者傳遞toggleTheme ，由按鈕使用。

import {ThemeContext} from './theme-context';

function ThemeTogglerButton() {
  // The Theme Toggler Button receives not only the theme
  // but also a toggleTheme function from the context
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

而提供者（它是通過toggleTheme實現的提供toggleTheme ）使得toggleTheme可供上下文消費者使用。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => { ... };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    // The entire state is passed to the provider
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

<ThemeContext.Provider value={this.state}>這是您提供toggleTheme實現的toggleTheme 。