react 面试问题

如果在初始状态中使用 props 属性会发生什么?

如果在不刷新组件的情况下更改组件上的属性，则不会显示新的属性值，因为构造函数函数永远不会更新组件的当前状态。只有在首次创建组件时才会用 props 属性初始化状态

//这里是不会显示更新的输入值的
class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      records: [],
      inputValue: this.props.inputValue
    };
  }

  render() {
    return <div>{this.state.inputValue}</div>
  }
}

//这里会显示
class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      record: []
    }
  }

  render() {
    return <div>{this.props.inputValue}</div>
  }
}

createElement() 和 cloneElement() 方法有什么区别?

JSX 元素将被转换为 React.createElement() 函数来创建 React 元素，这些对象将用于表示 UI 对象。而 cloneElement 用于克隆元素并传递新的属性

组件的命名方法

export default class TodoApp extends React.Component {
  // ...
}

不用 display 方式

switching组件

//这就是简单版的路由操作吧
import HomePage from './HomePage'
import AboutPage from './AboutPage'
import ServicesPage from './ServicesPage'
import ContactPage from './ContactPage'

const PAGES = {
  home: HomePage,
  about: AboutPage,
  services: ServicesPage,
  contact: ContactPage
}

const Page = (props) => {
  const Handler = PAGES[props.page] || ContactPage

  return <Handler {...props} />
}

// The keys of the PAGES object can be used in the prop types to catch dev-time errors.
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
}

为什么我们需要将函数传递给 setState() 方法?

这背后的原因是 setState() 是一个异步操作。出于性能原因，React 会对状态更改进行批处理，因此在调用 setState() 方法之后，状态可能不会立即更改。这意味着当你调用 setState() 方法时，你不应该依赖当前状态，因为你不能确定当前状态应该是什么。这个问题的解决方案是将一个函数传递给 setState()，该函数会以上一个状态作为参数。通过这样做，你可以避免由于 setState() 的异步性质而导致用户在访问时获取旧状态值的问题。

假设初始计数值为零。在连续三次增加操作之后，该值将只增加一个。

this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
// this.state.count === 1, not 3


this.setState((prevState, props) => ({
  count: prevState.count + props.increment
}))
// this.state.count === 3 as expected

在 React v16 中是否支持自定义 DOM 属性

1 .支持所有自定义的DOM属性
2 .建议避免使用 forceUpdate()，强制更新组件刷新，并且只在 render() 方法中读取 this.props 和 this.state。

super(props)做了什么？

1 .传统的组件样式

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

2 .super指的是父类的构造函数，在上面的例子中，指的是react.component的实现
3 .在调用父类构造函数之前，是不能在constructor中使用this关键字
4 .让 React.Component 构造函数能够初始化 this.props，将 props 传入 super 是必须的
5 .React 在调用构造函数后也立即将 props 赋值到了实例上，即使你不传props，也是可以访问的。但是这样不是很明确，最好还是加上为好
6 .React 会在构造函数执行完毕之后给 this.props 赋值。但如此为之会使得 this.props 在 super 调用一直到构造函数结束期间值为 undefined。
7 .如果super传入了props，那么会在构造函数执行完毕之前被赋值

class Button extends React.Component {
  constructor(props) {
    super(props); // ✅ 传入 props
    console.log(props);      // ✅ {}
    console.log(this.props); // ✅ {}
  }
  // ...
}

8 .super(props, context) 这里是两个参数，但是后面的一般都不会用到
9 .有了hook之后，就不用再搞这些有的没的了
10 .