出三题面试题

[Sunshine168]

RT

js 基础

 console.log(typeof null)
 console.log(typeof Array)
 console.log(typeof new Array())
 console.log(Object instanceof Function)
 console.log(Function instanceof Object)
 console.log(1+"2")
 console.log(false + 1)

react 基础

import React from 'react';

export default class extends React.Component{
  state = {
    a:1
  }
  render(){
   return (
     <div>
       <span>{this.state.a}</span>
       <button onClick={() => {
         this.setState({
           a: this.state.a + 1
         })
         console.log(this.state.a)
       }}>+</button>
     </div>
   )
  }
}

// 问第一次点击button的时候，控制台输出的内容

react 进阶问题

// main 入口文件

import React from 'react';
import Parent from './parent';

class App extends React.Component {
   state =  {
     mount:true
   }
   render(){
     return (
       <div style={styles}>
        {this.state.mount?<Parent />:null}
         <h2>Start editing to see some magic happen {'\u2728'}</h2>
         <button onClick={()=>{
           this.setState({
             mount:!this.state.mount
           })
         }}>test</button>
       </div>
     )
   }
}

render(<App />, document.getElementById('root'));

// parent Component

import React from 'react';
import ChildComponent from './Hello.js'

export default class Parent extends React.Component {
  constructor(props) {
    super(props)
    console.log('parent:constructor')
  }

  componentWillMount() {
    console.log('parent: will mount')
  }

  componentDidMount() {
    console.log('parent: did mount')
  }

  componentDidUpdate() {
    console.log('parent: did update')
  }

  componentWillUnmount() {
    console.log('parent: will mount')
  }

  render() {
    console.log('parent render')
    return (
      <div>
        <ChildComponent refresh={()=>{
          console.log('did update A')
          this.setState({},()=>{
            console.log('did update B')
          })
        }}/> 
      </div>
    )
  }
}

child Component

import React from 'react';

export default class extends React.Component{
  constructor(props){
    super(props)
    console.log('child:constructor')
  }

componentWillMount(){
  console.log('child: will mount')
}

componentDidMount(){
  console.log('child: did mount')
}

componentDidUpdate(){
  console.log('child: did update')
}

componentWillUnmount(){
  console.log('child: will mount')
} 

  render(){
    console.log('child render')
   return (
     <div>
       <span>child Component </span>
       <button onClick={() => {
         this.props.refresh()
       }}>refresh</button>
     </div>
   )
  }
}

请问在 App 第一次render的时候,控制台输出的语句是什么？

请问在点击子组件refresh按钮按下的时候控制台输出的语句是什么？

答案

 console.log(typeof null)// Object
 console.log(typeof Array)// Function
 console.log(typeof new Array())// Object
 console.log(Object instanceof Function) // true
 console.log(Function instanceof Object)
 // true
 console.log(1+"2") // 12
 console.log(false + 1) // 1

react 基础

1

react 进阶问题

第一次 render

parent:constructor
parent: will mount
parent render
child:constructor
child: will mount
child render
child: did mount
parent: did mount

update

did update A
parent render
child render
child: did update
parent: did update
did update B

PS 进阶题codesanbox

https://codesandbox.io/s/nknjpy162m