react知识和一些常见问题

react知识和一些常见问题

1.什么是声明式编程

声明式编程关注的是你要做什么，而不是如何做。声明式编程很容易推理，因为代码本身描述了它在做什么

例如：

const num = [1,2,3,4,5];

// 声明式
// 使用map函数，让编译器来完成
const doublenum = numbers.map(num => num * 2);

console.log(doublenum)

// 命令式
// 需要写出所有的流程步骤
const doubleArr= [];
for(let i=0; i<numbers.length; i++) {
    const doublenum = numbers[i] * 2;
    doubleArr.push(doublenum)
}

console.log(doubleArr)

2.什么是函数式编程

特点：

• 不可变性(Immutability)
• 纯函数
• 数据转换
• 高阶函数
• 递归
• 组合

不可变性

表示数据不可更改，也无法更改，如果要改变数据，则必须复制数据的副本

例如：

const state = {
    name: 'lia',
    age: 18
    like: 'eat'   
}

const copiedState = Object.assign({}, state)
copiedState.age = 20

纯函数

始终接收一个或多个参数并计算参数，返回数据或函数

没有副作用

例如：

使用非纯函数，是直接修改的state

const state = {
    name: 'lia',
    age: 18,
    like: 'eat'   
}

function appendAddress() {
    state.address = 'chengdu'
}
appendAddress()

console.log(state)

使用纯函数，不会改变原来的state

const state = {
    name: 'lia',
    age: 18,
    like: 'eat'   
}

function appendAddress(state) {
  const copyState = Object.assign({}, state);
  copyState.address = 'chengdu'
  return copyState
}
console.log(appendAddress(state))
console.log(state)

高阶函数

高阶函数是将函数作为参数或者返回函数的函数

Array.map，Array.fileter，Array.reduce都是高阶函数

const Young = age => age < 25
const message = msg => 'she is' + msg
function isYoung(age, Young, message) {
  const returnMessage = Young(age) ? message("young") : message("old")
  return returnMessage
}

console.log(isYoung(18,Young,message))

递归

递归是一种函数满足一定条件之前自身调用的技术

注意：浏览器不能处理太多递归和抛出错误

function print(str, count) {
  if(count <= str.length) {
    console.log(str.substring(0, count))
    print(str, ++count)
  }
}

console.log(print("abcdefghijk",1))

组合

将功能划分为小型可重用的纯函数，，将所有较小的纯函数组合在一起成更大的函数，最终得到一个应用程序，称为组合

什么是React

React是一个简单的javascript UI库，用于构建高效、快速的用户界面，是一个轻量级的库，遵循组件设计模式、声明式编程和函数式编程概念，使用虚拟Dom树操作Dom，遵循从高阶组件都低阶组件的单向数据流

React 和 Angular有什么不同

Angular是一个成熟的MVC框架，有很多特定的特性，如服务、指令、模板、模块、解释器等。

React是一个非常轻量级的库，只关注MVC的视图部分

Angular遵循两个方向的数据流，React遵循从上到下的单向数据流，在开发特性时给开发人员很大的自由，例如：调用API方式、路由等。