React 基础面试题, React 中如何获取组件对应的 DOM 元素?
React 基础面试题, React 中如何获取组件对应的 DOM 元素?
QA
Step 1
Q:: React 中如何获取组件对应的 DOM 元素？
A:: 在 React 中，如果你需要访问一个组件对应的 DOM 元素，可以使用 ref。首先，在类组件中，你可以通过 React.createRef() 创建一个 ref，然后将这个 ref 传递给组件的 ref 属性。函数组件中，可以使用 useRef 来创建一个 ref。例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current); // 访问 DOM 元素
}
render() {
return <div ref={this.myRef}>Hello, world!</div>;
}
}
在函数组件中使用 useRef``:
function MyComponent() {
const myRef = useRef(null);
useEffect(() => {
console.log(myRef.current); // 访问 DOM 元素
}, []);
return <div ref={myRef}>Hello, world!</div>;
}
Step 2
Q:: 在 React 中如何处理表单元素？
A:: React 中处理表单元素的方式主要有两种：受控组件和非受控组件。受控组件是指表单数据由 React 组件状态来控制，表单的值由状态驱动。非受控组件则是通过使用 ref 直接访问 DOM 元素的值。
受控组件的示例：
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
};
handleSubmit = (event) => {
alert('Submitted value: ' + this.state.value);
event.preventDefault();
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="submit">Submit</button>
</form>
);
}
}
非受控组件的示例：
class MyForm extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
handleSubmit = (event) => {
alert('Submitted value: ' + this.inputRef.current.value);
event.preventDefault();
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={this.inputRef} />
<button type="submit">Submit</button>
</form>
);
}
}
Step 3
Q:: React 中的生命周期方法有哪些？
A:: 在类组件中，React 提供了多个生命周期方法，可以帮助开发者在不同的阶段进行特定操作。主要的生命周期方法有：
1. 挂载阶段：
- constructor()：初始化组件的状态。
- componentDidMount()：组件挂载后调用，可以进行数据获取或订阅操作。
2. 更新阶段：
- shouldComponentUpdate()：在重新渲染前调用，可以根据条件决定是否重新渲染组件。
- componentDidUpdate()：组件更新后调用。
3. 卸载阶段：
- componentWillUnmount()：组件卸载前调用，可以执行清理操作，如取消订阅或清理计时器。
在函数组件中，可以使用 useEffect 钩子函数来实现类似的功能。
Step 4
Q:: React 中如何进行组件间的通信？
A:: 组件间的通信方式有多种：
1. 通过 Props：父组件可以通过 props 向子组件传递数据或回调函数。
2. 使用 Context：对于需要在多层级组件中传递数据的场景，可以使用 React 的 Context API。
3. 通过事件回调：子组件可以调用通过 props 传递的回调函数，向父组件传递数据。
4. 通过状态管理库：使用 Redux、MobX 等状态管理库，可以在全局状态中存储数据，供多个组件共享。