VUE典型例题

1：什么是JSX，它有哪些特性？

答：JSX是一种定义带属性树结构的语法，树结构实际上就是dom结构，属性往往是dom节点中的属性。在react中，常用JSX进行代码的编写。

特性：1、增强JS语义

           2、结构较为清晰

           3、抽象程度比较高

           4、代码模块化

           5、类似于XML语法

           6、不要加引号,单行不需要加括号,只有一个根目录，多行用小括号()

           7、JSX混入表达式 用大括号{}，表达式有返回值

           8、样式 class 改为className

           9、行内样式 格式：style={{key:value}} 多个单词用驼峰的形式

          10、只有一个根标签

          11、标签必须闭合

2：说说什么是react的state，并说明如何修改state？

答：state是组件对象最重要的属性，值是对象(可以包含多个key—value组合)，state中的值可以修改。

当需要修改里面的值的状态需要通过调用 setState()来改变，从而达到更新组件内部数据的作用，并且重新调用组件 render 方法, setState 还可以接受第二个参数，它是一个函数，会在 setState 调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成。

3：props你是如何理解的？

答：1、类似于state，props也是react的一项重要属性，两者有一定的相似之处，主要都

是用来保存数据状态的。每一次改动都会使页面重新渲染一次。

1. 用于组件之间的通信，一种数据传递的方式。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递。
2. props是只读属性。想要修改props，只能从父组件修改，然后传递给子组件。

4：React 中的key是什么？为什么它们很重要？

答：key是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系。

5：react如何绑定事件，举例说明？

答：react有四种事件绑定方式：

1、同一绑定this

this.hanldEvent = this.hanldEvent.bind(this)

hanldEvent(){

    console.log(this)

}<button onClick={this.hanldEvent}></button>

1. 在事件中通过bind绑定this

<button onClick={this.hanldEvent.bind(this)}></button>

1. 直接传入箭头函数，在箭头函数中调用需要调用的箭头函数

<button onClick={e=>{

  this.hanldlist('why',) //可以传任何的参数

      }}>点我</button>hanldlist(name,evnet){

      console.log(this.state.message,name,evnet);

}

4、通过箭头函数绑定this

<button onClick={this.hanldEvent}></button>

hanldEvent=()=>{

        console.log(this);

}

二：操作题（50分）

1：用react，实现累加功能，有一个按钮，初始值为0，每点击一次，按钮数字累加1。

import React, { Component } from 'react'

export default class App extends Component {

state = {

   count:0

}

handleClick=() => {

let {count} = this.state

console.log("成功")

    this.setState({

        count: count + 1

    })

}

render() {

let {count}= this.state

return (

<div>

<button onClick={ this.handleClick } >增加</button>

<p> 点击{count}次.</p>

</div>

)

}

}

2：用react实现开灯关灯效果，功能如下：页面默认按钮为（关灯），背景颜色为白色，单击按钮后变为（开灯），背景颜色变为黑色。

import React, { Component } from 'react'

export default class App extends Component {

state = {

   isflag:false

}

handleClick=() => {

let {isflag} = this.state

    this.setState({

       isflag:!isflag

    })

}

render() {

let {isflag}= this.state

document.body.className=isflag? "yes":"no"

return (

<div>

<button onClick={ this.handleClick } >{isflag? "close":"open"}</button>

</div>

)

}

}

样式：

button {

width: 150px;

height: 50px;

color: red;

border-radius: 10px;

border: none;

cursor: pointer;

background-color: yellow;

}

.no {

background: #fff;

}

.yes {

background: #000;

}