前端大厂最新面试题-communication.docx

前端大厂最新面试题-communication.docx 本资源主要讲解了 React 中组件之间的通信方式，包括父组件向子组件传递、子组件向父组件传递、兄弟组件之间的通信、父组件向后代组件传递、非关系组件传递等多种方式。 一、什么是组件之间的通信？ 组件之间的通信是指发送者通过某种媒体以某种格式来传递信息到收信者，以达到某个目的。在 React 中，组件之间的通信是非常重要的，因为它可以使得组件之间能够互相交互和协作。 二、如何实现组件之间的通信？ 组件之间的通信可以通过多种方式实现，包括： 1. 父组件向子组件传递：父组件可以通过 props 属性将数据传递给子组件。 2. 子组件向父组件传递：子组件可以通过回调函数将数据传递给父组件。 3. 兄弟组件之间的通信：兄弟组件可以通过父组件作为中间层来实现数据的互通。 4. 父组件向后代组件传递：父组件可以通过 context 来实现数据的传递。 5. 非关系组件传递：非关系组件可以通过事件机制来实现数据的传递。 三、父组件向子组件传递 父组件向子组件传递是最常见的方式。父组件可以通过 props 属性将数据传递给子组件。例如： ``` function EmailInput(props) { return ( <label> Email: <input value={props.email} /> </label> ); } const element = <EmailInput email="123124132@163.com" />; ``` 四、子组件向父组件传递 子组件向父组件传递可以通过回调函数来实现。例如： ``` class Parents extends Component { constructor() { super(); this.state = { price: 0 }; } getItemPrice(e) { this.setState({ price: e }); } render() { return ( <div> <div>price: {this.state.price}</div> {/* 向子组件中传入一个函数 */} <Child getPrice={this.getItemPrice.bind(this)} /> </div> ); } } class Child extends Component { clickGoods(e) { // 在此函数中传入值 this.props.getPrice(e); } render() { return ( <div> <button onClick={this.clickGoods.bind(this, 100)}>goods1</button> <button onClick={this.clickGoods.bind(this, 1000)}>goods2</button> </div> ); } } ``` 五、兄弟组件之间的通信 兄弟组件之间的通信可以通过父组件作为中间层来实现数据的互通。例如： ``` class Parent extends React.Component { constructor(props) { super(props) this.state = {count: 0} } setCount = () => { this.setState({count: this.state.count + 1}) } render() { return ( <div> <SiblingA count={this.state.count} /> <SiblingB onClick={this.setCount} /> </div> ); } } ``` 六、父组件向后代组件传递 父组件向后代组件传递可以通过 context 来实现数据的传递。例如： ``` const PriceContext = React.createContext('price') <PriceContext.Provider value={100}> {/* 后代组件可以通过 Consumer 组件来接收数据 */} <Consumer> {value => <div>price: {value}</div>} </Consumer> </PriceContext.Provider> ``` React 中组件之间的通信可以通过多种方式实现，包括父组件向子组件传递、子组件向父组件传递、兄弟组件之间的通信、父组件向后代组件传递、非关系组件传递等。