react面试题:
1.props、setState、this.forceupdate()会引起rerender
2.ReferenceError: must call super constructor in derived class before accessing ‘this’
class Example extends Component {
constructor(props) {
super(props); // 这句访问this
this.state = {};
}
}
3.const [count, setCount] = useState(0)是数组解耦array destructuring
4.what value of button will allow you to pass the name of the person to be hugged?
export default class About extends Component {
hug(name) {
console.log(name + 1);
}
render() {
let name = ‘dhk’
return (
)
}
}
这两种情况都可以:
- how would you print the list of the ones collected so far?
6.选2
7.react createPortal(第一个参数是要渲染的组件,第二个参数是要渲染dom的位置),选4
8.React.createElement(tagName, props, childContents)
React.createElement(
type,
[props],
[…children]
)
第一个参数是必填,传入的是似HTML标签名称,eg: ul, li
第二个参数是选填,表示的是属性,eg: className,按钮点击时间,id
第三个参数是选填, 子节点,eg: 要显示的文本内容
其他用法:
React.createElement(‘li’, {
onClick:()=>{
console.log(‘createElement First Text Content’)
}
}, ‘First Text Content’),
嵌套写法:
var child1 = React.createElement('li', null, 'one');
var child2 = React.createElement('li', null, 'two');
var content = React.createElement('ul', { className: 'teststyle' }, child1, child2); // 第三个参数可以分开也可以写成一个数组
ReactDOM.render(
content,
document.getElementById('example')
);
9.选3
import React,{Component} from 'react';
class ErrorBoundary extends Component{
constructor(props){
super(props);
this.state = {}
}
componentDidCatch(error,info){
this.setState({
error: error,
errorInfo: info
})
}
render(){
if(this.state.errorInfo){
return <h1>Something went wrong.</h1>
}
return this.props.children;
}
}
export default ErrorBoundary;
使用
<ErrorBoundary>
<YourComponents />
</ErrorBoundary>
render() {
let name = 'dhk'
const MyComponent =({children}) => (<h1>{children.length}</h1>)
return (
<>
<div><button onClick={(e) =>this.hug(name, e)}>名字</button></div>
<div><button onClick={() =>this.hug(name)}>名字</button></div>
<MyComponent>
<p>hello</p>
<p>goodbye</p>
</MyComponent>
</>
)
}
12 dangerouslySetInnerHTML虚拟dom中,不检查这个节点的children内容,因此性能会有提升。
相当于vue的v-html
function App(){
return(
<div
dangerouslySetInnerHTML={
{
__html: '测试文本换行<br><font color="red">红色</font>'
}}
>
</div>);
}
ReactDOM.render(<App />, document.querySelector("#root"));
选4
13
14
15
16.选4 lazy
fallback属性接受任何在组件加载过程中你想展示的 React 元素
react.memo
const memo = (props) => React.memo(Mycomponent, (prevProps, nextProps) =>
prevProps.name === nextProps.name
)
第一个参数Mycomponent是函数式组件,第二个参数是判断Mycomponent是否根据当前传入的props有没有改变的回调函数,返回true则props没有发生改变,所以不用rerender
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
17
18
19
20。大括号里是什么语法
21
22
wrap the object in parentheses圆括号
23,选1 ,
因为PureComponent自动实现了shouldComponentUpdate()生命周期方法
24
25
26
27