linkedin的react面试题

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 (
              <div><button onClick={(e) =>this.hug(name, e)}>名字</button></div>
         )
     }
 }

这两种情况都可以:

  1. how would you print the list of the ones collected so far?
    选2
    在这里插入图片描述

6 .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 选1,函数组件不用render,直接return就可以
在这里插入图片描述

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没有发生改变,所以不用render

const OtherComponent = React.lazy(() => import('./OtherComponent'));
 
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

17 选1,箭头函数一行显示、并且不加大括号,自带一个return.
在这里插入图片描述
18在这里插入图片描述

在这里插入图片描述

19
在这里插入图片描述
20。大括号里是什么语法
在这里插入图片描述
21
在这里插入图片描述
在这里插入图片描述

22
在这里插入图片描述
在这里插入图片描述
wrap the object in parentheses圆括号

23,选2, 当你想要一个默认的SCU实现
因为PureComponent自动实现了shouldComponentUpdate()生命周期方法
在这里插入图片描述

24
在这里插入图片描述

25
在这里插入图片描述

26
在这里插入图片描述

27
在这里插入图片描述

To practice more question, you can open follow the link:
https://github.com/Ebazhanov/linkedin-skill-assessments-quizzes/blob/main/reactjs/reactjs-quiz.md

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端段

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值