¡Reacciona a las preguntas de la entrevista, todo! ! ! (Cubo familiar)

Cree un comando de proyecto de reacción:

npx create-react-app my-app

Ingrese a la carpeta:

cd my-app

Proyecto de inicio:

npm start（开发模式下运行）
npm test(测试环境运行）
npm run build(打包为生产模式）

Mostrar archivo de configuración: irreversible, mientras se muestre, no hay forma de ocultarlo

npm run eject

 ¿Por qué crear subdirectorios en src?

webpack solo procesa archivos en src. Si no menciona que css y html están ubicados en la carpeta src, webpack no podrá encontrarlos .

react es una aplicación de una sola página

1. ¿Qué es React?

Biblioteca JS utilizada para construir la interfaz de usuario

2. ¿Cuáles son las características de React?

Se usa para DOM virtual, modo de diseño en componentes, código declarativo, flujo de datos unidireccional, usa jsx para describir información y otras características

3. ¿Qué es el DOM virtual?

DOM para construir HTML virtual

El DOM virtual se puede considerar como un árbol de objetos js que simula el árbol DOM. P.ej:

var element = {
    element: 'ul',
    props: {
        id:"ulist"
    },
    children: [
    { element: 'li', props: { id:"first" }, children: ['这是第一个List元素'] },
    { element: 'li', props: { id:"second" }, children: ['这是第二个List元素'] }
    ]
}

4. ¿Por qué utilizar DOM virtual?

Siempre que cambien los datos tradicionales, el DOM se volverá a renderizar. El propósito del DOM virtual es acumular todas las operaciones, calcular todos los cambios y actualizar el DOM una vez.

5. ¿Qué es un patrón de diseño en componentes?

El código reutilizable se puede extraer en componentes para uso común (interfaz de usuario, métodos, etc.) 

 

6. Pensamiento de código declarativo (programación):

Es cuál es su propósito y cómo debe hacerlo, pero no especifica cómo hacerlo.

Ejemplo: Ve al bar y dile al camarero que quieres un cóctel, y el mesero te da el cóctel preparado y no dice cómo es el proceso.

const toLowerCase = arr = arr.map(
    value => value.toLowerCase();
)

7. ¿Existen otras formas de programación?

Programación imperativa

Es describir cómo funciona el código, decirle a la computadora que lo ejecute paso a paso, hacer lo primero y luego hacer.

Ejemplo: ir al bar para pedir una copa de vino y pedirle al camarero

• Retire un vaso del estante
• Pon el vaso delante del barril de vino.
• Encienda el interruptor del barril de vino hasta que la copa de vino esté llena
• Pasar el cóctel preparado al cliente.

const toLowerCase = arr => {
    const res = [];
    for (let i = 0, len = arr.length; i < len; i++) {
        res.push(arr[i].toLowerCase());
    }
    return res;
}

8. Comparación de programática e imperativa

• Conciso, fácil de entender, propicio para el mantenimiento del código de proyecto a gran escala.
• No es necesario utilizar variables, evita crear y modificar el estado 

9. ¿Qué es un flujo de datos unidireccional? 

Los datos se pasan principalmente del nodo padre al nodo hijo (a través de accesorios). Si un accesorio del padre cambia, React volverá a renderizar todos los nodos secundarios ( como el agua de una cascada, fluyendo de arriba a abajo, esta agua es el flujo de datos del componente). )

// 父组件
import React, {Component} from 'react'
import Child from './Child'
class Parent extends Component{   
    // 初始化
    constructor(props){
        super(props)
        this.state = {
            message: '我是从父组件传过来的'
        }
    } 
    // 渲染
    render(){
        return(
            <div>
                <Son msg={this.state.message}/>
            </div>
        )
    }
}
export default Parent


// 子组件
import React, {Component} from 'react'
class Child extends Component{  
    // 初始化
    constructor(props){
        super(props)
    } 
    // 渲染
    render(){
        return(
            <div>
               {this.props.message}
            </div>
        )
    }
}
export default Child

10. ¿Qué es JSX? Código JSX para mostrar el proceso de conversión de contenido.

JSX es el lenguaje extendido de JS (sintaxis jsx = sintaxis js + sintaxis xml (html))

JSX es una abreviatura de JavaScript XML, una extensión gramatical de JavaScript y es esencialmente un objeto JavaScript. JSX puede describir muy bien la información de la interfaz de usuario, pero el navegador no puede leerla directamente. JSX se convertirá a la sintaxis JS durante el proceso de compilación.

11. ¿Cuáles son las principales funciones de reaccionar?

• Utiliza DOM virtual, no DOM real
• Sigue el flujo de datos unidireccional

12.Las ventajas y desventajas de reaccionar

ventaja:

• Mejora del rendimiento de las aplicaciones y la eficiencia del desarrollo.
• Usando JSX, el código es legible
• El ciclo de vida del componente WillUnmount de React puede borrar todos los eventos relacionados y evitar fugas de memoria
• No opera directamente en el DOM, pero introduce el concepto de un DOM virtual, que se inserta entre js y el DOM real, con buen rendimiento y alta velocidad. 

Desventaja: cada vez que  state cambias, la render función debe generar un DOM virtual completo, aunque el  state cambio sea pequeño, la renderfunción se calculará por completo. Si la  render función es muy complicada, este proceso desperdiciará muchos recursos informáticos en vano

https://blog.csdn.net/weixin_42052388/article/details/80902388

13. Comparación de la diferencia entre los dos marcos de VUE y React 

Similitudes:

• Biblioteca Js para crear UI
• Ligero y cómodo de usar
• DOM virtual
• Arquitectura basada en componentes 

diferencia:

• Plantilla HTML usada por vue; React usa js
• Vue tiene una sintaxis de enlace bidireccional
• Vue agrega azúcar sintáctico calculado y reloj, etc. React necesita escribir su propia lógica para lograr
• React usa la sintaxis jsx
• La idea general de reaccionar es programática, componentes recomendados, datos sin cambios, flujo de datos unidireccional; los datos de Vue son variables, enlace bidireccional, escritura declarativa

14. Cómo funciona React  

React creará un DOM virtual. Cuando el estado de un componente cambia, React primero usará el algoritmo "diffing" para marcar los cambios en el DOM virtual. El segundo paso es el ajuste, que actualizará el DOM con el resultado del diff.

15 DOM real 和 DOM virtual 

React no manipula directamente el DOM, sino que implementa el DOM virtual. El componente DOM se asigna a este DOM virtual. React implementa el algoritmo diferente en el DOM virtual. Al volver a renderizar el componente, encontrará que el nodo DO0M se cambiará a través de diff, y luego actualizará la modificación al nodo DOM real del navegador. 

17. Por qué el DOM virtual mejora el rendimiento 

Virtual DOM es equivalente a agregar una caché entre JS y DOM real, usando diff para reducir operaciones innecesarias, mejorando así el rendimiento Es esencialmente un objeto JS.

• El DOM virtual es una estructura de datos de objeto js que mapea el DOM real
• Utilice el DOM virtual para evitar la manipulación directa del DOM real y mejorar el rendimiento
•  Cuando se actualiza el estado, el nuevo DOM virtual se vuelve a renderizar y el algoritmo diff se utiliza para comparar el DOM nuevo y el antiguo para actualizar

18.Comportamiento predeterminado de Block React  

e.preventDefault () e es un evento sintético proporcionado por un tercero

Nota: no puede usar return

class App extends React.component{
constructor(props){
super(props);
this.state = {
}
}

hander(e){
e.preventDefault()
}
render(){
return <button onClick={ this.hander.bind(this) }>阻止事件</button>
}
}

19. Pasar parámetros al controlador de eventos. 

Por ejemplo, elimine el ID de la fila actual

<button onClick={(e) => this.delete(e,id)}>Delete Row<button>
<button onClick={this.delete.bind(this,id)}>Delete Row</button>

 20. ¿Cuál es el papel de la clave en React? 

 Función (propósito): la tecla es un identificador auxiliar que se utiliza para rastrear los elementos de la lista que se han modificado, eliminado o agregado. En el algoritmo diff, la clave se usa para determinar si el nodo del elemento se mueve o si se crea un elemento recién creado, lo que reduce la reproducción repetida innecesaria de elementos.

21. Al generar una lista, ¿cuál es la clave?

Las claves ayudarán a React a identificar qué itemsha cambiado, qué se ha agregado o se ha eliminado. Las claves deben asignarse a los elementos de la matriz para dar una identificación estable al elemento (DOM). La mejor manera de elegir una clave es utilizar una cadena que identifique de forma única un elemento de la lista. Muchas veces usará los datos en los ID como claves, cuando no tiene un ID estable, se utilizan para renderizar items, puede usar el proyecto como clave de entrada de índice de renderizado, pero este enfoque no se recomienda, si itemspuede reordenar, liderará a re-renderralentizar.

22. El algoritmo diff en React 

La función del algoritmo diff es calcular la parte modificada del DOM virtual y luego realizar operaciones DOM nativas en esta parte sin volver a renderizar la página completa.

https://www.cnblogs.com/yumingxing/p/9438457.html

El algoritmo diff tiene 3 estrategias:

• tree diff: Las operaciones de movimiento entre niveles de los nodos DOM son particularmente pocas y pueden ignorarse.
• Diferencia de componentes: dos componentes con la misma clase generan estructuras de datos similares; dos componentes con clases diferentes generan estructuras de árbol diferentes
• elemento diff: para un grupo de nodos secundarios en el mismo nivel, que se distingue por una identificación única

Principio del algoritmo diff

• Descomponga la estructura del árbol de acuerdo con los niveles y solo compare elementos en el mismo nivel
• Agregue un atributo clave único a cada unidad de la estructura de la lista para facilitar la comparación
• React solo coincidirá con componentes de la misma clase
• En la operación de fusión, cuando se llama al método setState del componente, React lo marcará como sucio. Al final de cada ronda del ciclo de eventos, React comprobará todos los componentes marcados como sucios y volverá a renderizar.
• Representación selectiva de subárboles. Los desarrolladores pueden re-shouldComponentUpdate para mejorar el rendimiento diferencial.

 23. Elemento y componente en React

El elemento es una estructura de datos que describe el contenido del material educativo en la pantalla y es una oferta para los objetos de la interfaz de usuario.

Component es una función o clase que puede aceptar la entrada de parámetros y devolver un ReactElement

24.props y estado (cuál es la diferencia entre estado (estado) y propiedades (props) (del componente))

• El estado es una estructura de datos, que se enviará y cambiará a medida que avanza el evento, y solo se puede cambiar mediante setState
• Los accesorios son las propiedades del componente, pasados ​​del componente principal al componente secundario, los accesorios no se pueden cambiar 

El estado es local, excepto por el componente en el que se encuentra, no se puede acceder a otros componentes

• Componentes sin estado : componentes sin conjunto de estados (los componentes sin estado se construyen a través de declaraciones funcionales, una función es un componente)
• Componente con estado : el componente con estado establecido (el componente con estado se construye por componente, una subclase es un componente)

25. React puede declarar componentes de dos formas: ¿Cuál es la diferencia entre ellos y cuál elegirías en qué circunstancias? ( ¿Cuáles son las formas de construir componentes en React?)  

•  Componente de función: la primera letra debe estar en mayúscula y el elemento de reacción debe devolverse
• Componentes de la clase: escriba en mayúscula la primera letra, use el método render y devuelva el elemento react

// 函数组件
function Welcome(props){
return (
<h1>hello world</h1>
)
}


// 类组件
class Welcome extends React.Component{
        render(){
            return (
            <div>11</div>
        )
    }
}

la diferencia:

• El componente funcional parece ser solo una función cuyo valor de retorno es la estructura DOM, pero detrás está la idea de componentes sin estado
• En los componentes funcionales, no puede usar State, ni puede usar el método del ciclo de vida del componente, que determina que los componentes funcionales son todos componentes expandibles, reciben accesorios, renderizan DOM y no prestan atención a otra lógica.
• No hay esto en el componente de función.
• Los componentes funcionales son más fáciles de entender. Cuando ves un componente funcional, sabes que su función es solo recibir propiedades y renderizar la página. No realiza un procesamiento lógico que no tiene nada que ver con la UI. Es solo una función pura. No importa cuán compleja sea la estructura DOM que devuelva

26. ¿Cuáles son las etapas del ciclo de vida del componente React?

Hay tres etapas diferentes en el ciclo de vida de los componentes de React:

1. Etapa de renderizado inicial: esta es la etapa en la que el componente está a punto de comenzar su viaje de vida y entrar al DOM.
2. Etapa de actualización: una vez que el componente se agrega al DOM, solo se puede actualizar y volver a renderizar cuando cambia la propiedad o el estado. Estos solo ocurren en esta etapa.
3. Fase de desinstalación: esta es la fase final del ciclo de vida del componente, el componente se destruye y se elimina del DOM.

27. Hable brevemente sobre el ciclo de vida (señale la diferencia en los métodos del ciclo de vida (de los componentes))

• constuctor: inicializa los accesorios y el estado en el constructor
• componentWillMount: ejecutar antes de la representación del componente, realizar la modificación final en el estado
• render: renderizado
• componentDidMount: se ejecuta después de la representación del componente
• componentWillReceiveProps - Esta función periódica actúa sobre la transición de estado causada por un cambio de prop específico
• shouldComponentUpdate - Se utiliza para optimizar el rendimiento, devuelve verdadero o falso según condiciones específicas. Si desea actualizar el componente, devuelva verdadero; de lo  contrario, devuelva  falso . De forma predeterminada, devuelve falso.
• componentWillUpdate - Los datos se ejecutan antes del cambio.
• componentDidUpdate - Llamado inmediatamente después de que ocurre la renderización
• componentWillUnmount - Llamado después de que el componente se descargue del DOM. Se usa para limpiar el espacio de la memoria

28. ¿Qué es el flujo de datos unidireccional y la mejora del estado?

• Flujo de datos unidireccional: de arriba a abajo, el componente principal fluye los datos de estado al componente secundario, y el componente secundario obtiene el valor a través de accesorios (como el agua de una cascada, fluye de arriba hacia abajo, esta agua son los datos flujo del componente)
• Promoción de estado: interacción de datos entre componentes (muchos subcomponentes quieren usar este estado, elevar este estado a la cima, quién usa accesorios para quién)

Ejemplo: si ambos componentes necesitan usar el estado del otro, entonces la promoción de estado se puede usar en este momento. El método específico es escribir el estado de los dos componentes secundarios en su componente principal, y luego el componente principal transfiere el estado a los accesorios del componente secundario, de modo que el componente secundario también es equivalente al estado.

Componente padre

import React from "react"
import Child1 from "./child1"
import Child2 from "./child2"

export default class Parent extends React.Component {

    constructor() {
        super()
        this.state = {
            money: 1
        }
    }

    changeHander(e){
        this.setState({
            money: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={ this.state.money } onChange={this.changeHander.bind(this)} />
                <p>Parent</p>
                人民比: <Child1 money={this.state.money} />
                美金: <Child2 money={this.state.money} />
            </div>
        )
    }
}

 Subcomponente 1

import React from "react"

export default class Child1 extends React.Component{

    constructor(){
        super()
        this.state = {
            input1: 0
        }
    }

    componentDidMount(){
        this.setState({
            input1: this.props.money
        })
    }

    changeHander(e) {
        this.setState({
             input1: e.target.value
        })
    }

    render() {
        return(
            <div>
                 { this.props.money }
               <input type="text" value={ this.state.input1 } onChange={ this.changeHander.bind(this) }/>
            </div>
        )
    }
}

 Subcomponente 2

import React from "react"

export default class Child2 extends React.Component{

    constructor(){
        super();
        this.state = {
            input2: 1
        }
    }

    componentDidMount(){
        this.setState({
            input2: this.props.money * 7
        })
    }

    changeHander(e) {
        this.setState({
             input2: e.target.value
        })
    }
    render() {
        return(
            <div>
                { this.props.money * 7}
               <input type="text" value={ this.state.input2 } onChange={ this.changeHander.bind(this) }/>
            </div>
        )
    }
}

29. ¿Qué sucedió después de llamar a setState?

setState actualizará el estado

El objeto de parámetro entrante se fusiona con el estado actual del componente, y luego se activa el llamado proceso de reconciliación. Después del proceso de reconciliación, de acuerdo con el nuevo estado, el elemento React reconstruirá el DOM virtual, realizará el algoritmo de diferenciación para compare la diferencia entre el árbol DOM virtual nuevo y el antiguo y actualice la vista. En lugar de representar todo.

El mecanismo de cola de tareas utilizado por setState no se ejecutará inmediatamente, sino que se agregará a la cola y se ejecutará una vez en el siguiente ciclo de eventos.

30. ¿Por qué se recomienda que el parámetro pasado a setState sea una devolución de llamada (función de devolución de llamada) en lugar de un objeto (no lo entienda, no lo memorice primero)

Debido a que la actualización de this.props y this.state puede ser asincrónica, no puede confiar en sus valores para calcular el siguiente estado

31. Acerca de este evento de clic de enlace de enlace == componente

// bind
// 1
<button onClick={this.handleClick.bind(this)}>hello<button/>
// 2
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}
render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={this.clicked.bind(this,"hello world")}>点击</button>
        </React.Fragment>
    )
}


// 2.在构造函数中默认绑定this(推荐）
this.handleClick = this.handleClick.bind(this)

// 3.使用箭头函数来处理,handleClick点击事件的方法
<button onClick={(e) => this.handleClick(e)}>Click me</button>

32. El papel del segundo parámetro de setState (no lo entiendas, no lo memorices)

Esta función se llamará cuando se complete la llamada a la función setState y el componente comience a renderizarse. Podemos usar esta función para monitorear si el renderizado está completo

(En el constructor) cuál es el propósito de llamar super (props)

 Antes de que se llame a super (), las subclases no pueden usar esto. En ES5, las subclases deben llamar a super () en el constructor. Porque los accesorios pasados ​​a super () pueden facilitar (en la subclase) el constructoraccesothis.props

33. ¿Qué es el enrutamiento de React?

El enrutador se utiliza para definir múltiples rutas.Cuando un usuario define una URL específica, si esta URL coincide con la ruta de cualquier "ruta" definida en el enrutador, el usuario será redirigido a esa ruta específica.

import React from 'react';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './views/Home'

export default class App extends React.Component{
    // 初始化
    constructor(props){
        super(props);
        this.state = {}
    }
    // 渲染
    render(){
        return(
           <BrowserRouter>
               <Switch>
                   <Route component={Home} path="/" />
               </Switch>
           </BrowserRouter>
        )
    }
}