React：更新子组件而不重新渲染父组件

Question

下面是一个简单的例子：

const { Component } = React
const { render } = ReactDOM

const Label = ({ text }) => (
  <p>{text}</p>
)

const Clock = ({ date }) => (
  <div>{date.toLocaleTimeString()}</div>
)

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      date: new Date()
    }
  }
  
  componentDidMount() {
    this.interval = setInterval(
      () => this.setState({ date: new Date() }),
      1000
    )
  }
  
  componentWillUnmount() {
    clearInterval(this.interval)
  }
  
  updateTime() {
    
  }
  
  render() {
    return (
      <div>
        <Label text="The current time is:" />
        <Clock date={this.state.date} />
      </div>
    )
  }
  
}

render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

this.setState({ date: new Date() }) 每秒被调用一次，用当前时间更新时钟。据我所知，setState 在 App 上调用了 render 方法，这会导致整个组件（包括标签）被重新渲染。

有没有办法在不重新渲染整个 App 组件的情况下将日期传递给 Clock（导致它被重新渲染）？这对性能有多大影响？

Answer 1

这不可能是你想要的。要将道具传递给子组件，父组件的状态或道具应该以某种方式改变。如您所知，这显然会触发重新渲染，因此所有孩子都会重新渲染。要更新，您的 Clock 组件应在这种情况下重新渲染和卸载/重新安装，以反映 DOM 更改。

如果您的应用程序不是那么大并且没有那么多孩子，请不要为这个问题而烦恼，因为渲染并不那么昂贵。代价高昂的是组件的 DOM 操作。在这里，React 区分真实和虚拟 DOM，即使重新渲染也不会卸载/重新安装 Label 组件。但是，如果您将Label 组件编写为PureComponent，它不会重新渲染。但是Clock组件要这样更新，就没办法了。

class Label extends React.PureComponent {
  render() {
    console.log("rendered");
    return (<p>{this.props.text}</p>)
  }
}

const Clock = ({ date }) => (
  <div>{date.toLocaleTimeString()}</div>
)

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      date: new Date()
    }
  }


  componentWillMount() {
    this.interval = setInterval(
      () => this.setState({ date: new Date() }),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  updateTime() {

  }

  render() {
    return (
      <div>
        <Label text="The current time is:" />
        <Clock date={this.state.date} />
      </div>
    )
  }

}

Answer 2

当你想更新一个子节点而不更新父节点时，状态必须在子节点中。您可以将状态 getter / setter 从子级传递给父级，以便能够读取和更新它：

function Child({onMount}) {
  const [value, setValue] = useState(0);

  useEffect(() => {
    onMount([value, setValue]);
  }, [onMount, value]);


  return (
    <div>
      {value}
    </div>    
  );
};


function Parent() {

  let value = null;
  let setValue = null;
  
  const onChildMount = (dataFromChild) => {
    value = dataFromChild[0];
    setValue = dataFromChild[1];
  };

  // Call setValue to update child without updating parent

  return (
    <div>
      <Child onMount={onChildMount}/>
    </div>    
  );
};

由于const [value, setValue] = useState(0);在Child中，更新值时只有子组件会重新渲染。此外，由于Parent 在onChildMount 处接收value 和setValue，因此父级可以使用它们来更新子级，而无需重新渲染父级。

Answer 3

使用子组件的引用可以实现：

export const parentA = () => {
  let ref = useRef<View>(null);
  const updateChild () {
    ref.current.props.setNativeProps({style:{backgroundColor: 'gray',}})
  }
  return (
    <childA>
      <Text>Test</Text>
    </childA>
  );
};

export const childA = () => {
  return <View style={{backgroundColor: 'green',}}></View>;
};