一天完成react面试准备开发者社区

一天完成react面试准备

原创

export class App extends Component {
  showResult() {
    console.log(this.input.value);
  render() {
    return (
        <input type="text" ref={(input) => (this.input = input)} />
        <button onClick={this.showResult.bind(this)}>展示结果</button>
}

export class App extends Component {
  showResult() {
    console.log(this.refs.username.value);
  render() {
    return (
        <input type="text" ref="username" />
        <button onClick={this.showResu1t.bind(this)}>展示结果</button>
}

this.setstate(
    username: "有课前端网",
  () => console.log("re-rendered success. ")
);

class Component extends React.Component {
  // 替换 `componentWillReceiveProps` ，
  // 初始化和 update 时被调用
  // 静态函数，无法使用 this
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判断是否需要更新组件
  // 可以用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}
  // 组件被挂载后触发
  componentDidMount() {}
  // 替换 componentWillUpdate
  // 可以在更新之前获取最新 dom 数据
  getSnapshotBeforeUpdate() {}
  // 组件更新后调用
  componentDidUpdate() {}
  // 组件即将销毁
  componentWillUnmount() {}
  // 组件已销毁
  componentDidUnMount() {}
}

public static getDerivedStateFromProps(nextProps, prevState) {
    // 当新 props 中的 data 发生变化时，同步更新到 state 上
    if (nextProps.data !== prevState.data) {
        return {
            data: nextProps.data
    } else {
        return null1
}

componentDidUpdate(prevProps) {
    // 当 id 发生变化时，重新获取数据
    if (this.props.id !== prevProps.id) {
        this.fetchData(this.props.id);
}

function withLoginAuth(WrappedComponent) {
  return class extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
            isLogin: false
      async componentDidMount() {
          const isLogin = await getLoginStatus();
          this.setState({ isLogin });
      render() {
        if (this.state.isLogin) {
            return <WrappedComponent {...this.props} />;
        return (<div>您还未登录...</div>);
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "有课前端网",
      msg: " ",
  render() {
    return <div> {this.state.msg}</div>;
  componentDidMount() {
    this.setState((oldState, props) => {
      return {
        msg: oldState.username + " - " + props.intro,
}

// context方式实现跨级组件通信 
// Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据
const BatteryContext = createContext();
//  子组件的子组件 
class GrandChild extends Component {
    render(){
        return (
            <BatteryContext.Consumer>
                {                    color => <h1 style={{"color":color}}>我是红色的:{color}</h1>
                }            </BatteryContext.Consumer>
//  子组件
const Child = () =>{
    return (
        <GrandChild/>
// 父组件
class Parent extends Component {
      state = {
          color:"red"
      render(){
          const {color} = this.state
          return (
          <BatteryContext.Provider value={color}>
              <Child></Child>
          </BatteryContext.Provider>
}

import React, { Component, Fragment } from 'react'
// 一般形式
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
// 也可以写成以下形式
render() {
  return (

一天完成react面试准备

一天完成react面试准备

什么是 React的refs？为什么它们很重要

react-router4的核心

传入 setstate函数的第二个参数的作用是什么？

新版生命周期

React的Fiber工作原理，解决了什么问题

在 ReactNative中，如何解决 adb devices找不到连接设备的问题？

什么是高阶组件(HOC)

React 中 refs 的作用是什么

redux 中间件

React怎么做数据的检查和变化

为什么虚拟dom会提高性能

react diff 算法

component diff

element diff

diff的不足与待优化的地方

react有什么优点

在 Redux中使用 Action要注意哪些问题？

shouldComponentUpdate 的作用

hooks 为什么不能放在条件判断里

这段代码有什么问题？

React中的状态是什么？它是如何使用的

跨级组件的通信方式？

对React中Fragment的理解，它的使用场景是什么？