react面试题

// 父组件
class Team extends PureComponent {
  constructor() {
    super()
    this.state = {
      name: 'oyo'
    }
  }
  render() {
    return (
      <div>Team onwer is:
        <People
          name={this.state.name}
          onClick={name => {
            this.setState({ name })
          }}
        >
        </People>
      </div>
    );
  }
};
// 子组件
class People extends PureComponent {
  render() {
    return (
      <span
        onClick={() => {() => this.props.onClick('hello')}
      >
        {this.props.name}
      </span>
    )
  }
});

setState(state => {
  return {
    num: state.num + 1
  }
})

this.setState(
  { username: 'tylermcginnis33' },
  () => console.log('setState has finished and the component has re-rendered.')
)

import React from 'react'
class Test extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      Number:1//设state中Number值为1
    }
  }
  //这里调用了setState但是并没有改变setState中的值
  handleClick = () => {
     const preNumber = this.state.Number
     this.setState({
        Number:this.state.Number
     })
  }
  render(){
    //当render函数被调用时，打印当前的Number
    console.log(this.state.Number)
    return(
             {this.state.Number}
           )
  }
}
export default Test

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

class ControlledForm extends Component {
  state = {
    username: ''
  }
  updateUsername = (e) => {
    this.setState({
      username: e.target.value,
    })
  }
  handleSubmit = () => {}
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          value={this.state.username}
          onChange={this.updateUsername} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  componentDidMount() {
    console.log(this.myRef.current)
  }
  render() {
    return <div ref={this.myRef} />
  }
}

function HOC(Wrapper) {
  class AddModal extends Component {
    constructor(props) {
      super(props)
      this.state = {
        name: '',
      }
    }
    render() {
      return <Wrapper {...this.props} ref={this.props.forwardedRef} data={this.state} />
    }
  }
  return React.forwardRef((props, ref) => <AddModal {...props} forwardedRef={ref} />)
}
export default HOC

render () {
  return (
    <ul>
      {this.state.todoItems.map(({task, uid}) => {
        return <li key={uid}>{task}</li>
      })}
    </ul>
  )
}

// 用来判定两个element需不需要更新
// 这里的key是我们createElement的时候可以选择性的传入的。
// 用来标识这个element，当发现key不同时，我们就可以直接重新渲染，不需要去更新了。
var _shouldUpdateReactComponent ＝ function (prevElement, nextElement) {
  if (prevElement != null && nextElement != null) {
    var prevType = typeof prevElement;
    var nextType = typeof nextElement;
    if (prevType === 'string' || prevType === 'number') {
      return nextType === 'string' || nextType === 'number';
    } else {
      return
        nextType === 'object' &&
        prevElement.type === nextElement.type &&
        prevElement.key === nextElement.key;
    }
  }
  return false;
}

//对于新的属性，需要写到dom节点上
for (propKey in nextProps) {
  //对于事件监听的属性我们需要特殊处理
  if (/^on[A-Za-z]/.test(propKey)) {
    var eventType = propKey.replace('on', '');
    //以前如果已经有，说明有了监听，需要先去掉
    lastProps[propKey] &&
    $(document).undelegate(
      '[data-reactid="' + this._rootNodeID + '"]',
      eventType,
      lastProps[propKey]);
    //针对当前的节点添加事件代理,以_rootNodeID为命名空间
    $(document).delegate(
      '[data-reactid="' + this._rootNodeID + '"]',
      eventType + '.' + this._rootNodeID,
      nextProps[propKey]);
    continue;
  }
 
  if (propKey == 'children') continue;
 
  //添加新的属性，或者是更新老的同名属性
  $('[data-reactid="' + this._rootNodeID + '"]').prop(propKey, nextProps[propKey])
}

// 创建context对象
import React from 'react'
import ReactDOM from 'react-dom'
const MyContext = React.createContext({
  name: '凤嘉',
})
// 父组件使用Provider
class App extends React.Component {
  render() {
    return (
      <MyContext.Provider store={{ name: '凤嘉' }}>
        <Header />
      </MyContext.Provider>
    )
  }
}
 
// 其中任意子组件消费store
class Title extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {store => (
          <h1>
            {store.children}
          </h1>
        )}
      </MyContext.Consumer>
    )
  }
}