[関連トピックの推奨事項:面接の質問に対応する(2021)]
仮想 DOM (VDOM)これは、実際の DOM、プログラミング概念、およびパターンのメモリ表現です。 ReactDOM などのライブラリを介して実際の DOM と同期されます。この同期プロセスはリコンシリエーションと呼ばれます。
仮想 DOM は、特定のテクノロジーというよりはパターンです。出典:https://github.com/sudheerj/reactjs-interview-questions
参考:https://www.javascriptcn.com/ read-65385.html
クラスコンポーネント)
コンポーネントが関数またはクラスを使用して宣言されているかどうかに関係なく、コンポーネント自体のすべての React コンポーネントは純粋な関数である必要があり、独自の
Attributes
propsはコンポーネントそのものです。状態はコンポーネント内で任意に変更できますコンポーネント プロパティと状態を変更すると、ビューが更新されます。class Welcome extends React.Component { render() { return ( Welcome { this.props.name }
); } } ReactDOM.render(
機能コンポーネントは、単一のprops
オブジェクトと React 要素を返しますfunction Welcome (props) { return Welcome {props.name}
} ReactDOM.render(
関数コンポーネント もちろん、クラスコンポーネントとの違いは、クラスコンポーネントは使用時にインスタンス化する必要があるのに対し、関数コンポーネントは直接関数を実行して結果を返すことができるため、関数コンポーネントのパフォーマンスがクラスコンポーネントよりも高いことです。パフォーマンスを向上させるには、機能コンポーネントを使用してみてください。
#違い
Yes |
ライフサイクルはありますか | No |
| ##状態はありますか | 状態||
はい |
资料来源：https://github.com/Pau1fitz/react-interview 参考资料：https://overreacted.io/how-are-function-components-different-from-classes/ Q3：React中的refs作用是什么？难度：⭐⭐ Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。 class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( ) } }
ログイン後にコピー
上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。 function CustomForm ({handleSubmit}) { let inputElement return ( ) }
ログイン後にコピー
资料来源：https://github.com/Pau1fitz/react-interview Q4：描述React事件处理。难度：⭐⭐ 为了解决跨浏览器兼容性问题，React中的事件处理程序将传递SyntheticEvent实例，该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面，除了它们在所有浏览器中的工作方式相同。 有点有趣的是，React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件。这对性能有好处，也意味着React在更新DOM时无需担心跟踪事件监听器。 资料来源：https://tylermcginnis.com/react-interview-questions/ Q5：state 和 props有什么区别？难度：⭐⭐ state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即
资料来源：https://github.com/sudheerj/reactjs-interview-questions 参考资料：https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react Q6：如何创建refs？难度：⭐⭐ Refs是使用React.createRef()方法创建的，并通过 class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ; } }
ログイン後にコピー
和： class UserForm extends Component { handleSubmit = () => { console.log("Input Value is: ", this.input.value) } render () { return ( ) } }
ログイン後にコピー
我们还可以借助闭包在功能组件中使用它。 资料来源：https://github.com/sudheerj/reactjs-interview-questions 参考资料：https://segmentfault.com/a/1190000015113359 Q7：什么是高阶组件？难度：⭐⭐ 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。 const EnhancedComponent = higherOrderComponent(WrappedComponent);
ログイン後にコピー
资料来源：https://github.com/sudheerj/reactjs-interview-questions 参考资料：https://css-tricks.com/what-are-higher-order-components-in-react/ Q8：constructor中super与props参数一起使用的目的是什么？难度：⭐⭐ 在调用方法之前，子类构造函数无法使用this引用 在ES6中，在子类的 在 使用props： class MyComponent extends React.Component { constructor(props) { super(props); console.log(this.props); // Prints { name: 'sudheer',age: 30 } } }
ログイン後にコピー
不使用props： class MyComponent extends React.Component { constructor(props) { super(); console.log(this.props); // Prints undefined // But Props parameter is still available console.log(props); // Prints { name: 'sudheer',age: 30 } } render() { // No difference outside constructor console.log(this.props) // Prints { name: 'sudheer',age: 30 } } }
ログイン後にコピー
上面的代码片段揭示了this.props行为仅在构造函数中有所不同。外部构造函数相同。 资料来源： https://github.com/sudheerj/reactjs-interview-questions https://www.fullstack.cafe/React) Q9：什么是受控组件？难度：⭐⭐⭐ 在HTML当中，像 |