React基础知识

1、React基础定义

  react是由Facebook开发的用于构建用户界面的javascript库

2、React中的三大显著特点

  （1）声明式写法：可以非常轻松的创建用户界面，数据改变的时候可以高效的改变界面，声明式的写法是强调结果的，相对的是命令式编程是强调过程的

  （2）组件化

  （3）一次学习，随处编写：无论目前你是在使用哪一种技术栈，你都随时可以引入react开发，react可以开发web程序，原生手机应用，系统有应用，命令行用具等

3、react安装

  方式一：

  （1）npm install creat-reacte-app -g【create-react-app：官方脚手架工具】

  （2）create-react-app my-project【my-project是你安装的项目名称】

  方式二：

    npx create-react-app my-app

4、为什么要使用JSX

React认为渲染逻辑本质上与其他UI逻辑内在耦合，比如，在UI需要处理绑定事件，在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据

5、calssName和htmlFor

JSX的属性和Html的属性非常相似，但有2个特例，第一个就是class的写法，为了避免和react中calss这个保留字冲突，所以进行变成了className，第二个是for，for这个字段也是一个保留字，所以在react中也进行了规避，在使用for进行循环的时候修改成了htmlFor

6、为什么html直接在js中书写却没有出现任何错误？(语法糖)

  因为jsx在最后生成代码的时候进行了编译，babel的编译作用，目前你可以自由的书写es6的语法，但是却没有任何问题，就是因为有babel的编译，生成的代码可以兼容不支持ES6的低版本浏览器

使用babel在线编译工具进行编辑：https://www.babeljs.cn/repl，可自行尝试

react代码 + 编译后的结果展示

例子一：
react代码： <h1>Hello World</h1>
编译后：    React.createElement("h1", null, "Hello World");

例子二：
react代码： <h1 className="test">Hello World</h1>
编译后：    React.createElement("h1", { className: "test" }, "Hello World");

例子三：自定义组件
react代码： <Welcome />
编译后：    React.createElement(Welcome, null);

 编译过上面几种格式，就会发现jsx只是一种语法糖，它是React.createElement的一种语法糖

7、props特性

组件无论是使用函数声明还是通过class声明，都不能修改自身的props

纯函数：不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果

function sum (a, b){
  return a + b
}

非纯函数：不是纯函数，因为它更改了自己的入参

function withdraw(account,amount){
  account.total -= amount
}

react的component有一个严格的规则：所有的react组件，必须像纯函数一样使用它们的props，即props是不能被修改的

8、state（状态）

  （1）state是私有的，完全受控于当前组件【props是外部传入的，不可改变】

  （2）this.setState()是更新state的唯一途径

9、声明周期

  组件初始化——组件更新——组件卸载

（1）组件初始化 componentDidMount

    具体的调用时间：

    创建时—调用constructor构造函数—调用render方法—React会更新DOM和refs—当component被渲染到Dom节点上之后调用componentDidMount方法

（2）组件更新 componentDidUpdate：接受两个参数，第一个参数是props值，第二个参数是state的值

    具体的调用时间：

    更新时—引起更新的三方式：新的props/调用了setState方法/forceUpdate方法—数据变化之后重新调用render方法—React会更新DOM和refs—componentDidUpdate方法

（3）组件卸载 componentWillUnmount

10、组件的名称必须得大写

使用组件的时候必须得注意，组件的名称必须以大写字母开头，React会将小写字母视为原生Dom标签。例如，<div/>代表HTML的div标签，而<Welcome/>则代表一个组件，并且需要在作用域没使用这个组件

11、正确的使用state

(1)不要直接修改State，state的修改必须使用setState()

错误
this.state.comment = 1

正确
this.setState({
  comment:1
})

构造函数是唯一可以给this.state赋值的地方

(2)State的更新可能是异步的

出于性能考虑，React可能会把多个setState调用合并成一个调用

因为this.props和this.state可能会异步更新，所以不要依赖他们的值来更新下一个状态

例如:此代码可能会无法更新计数器

错误
this.setState({
  counter:this.state.counter+this.props.increment
})

要解决这个问题，可以让setState()接收一个函数而不是一个对象。这个函数用上一个state作为第一个参数，将此次更新被应用时的props做为第二个参数

正确
this.setState(() =>{
  counter:state.counter+props.increment
})

上面使用了箭头函数，不过使用普通的函数也同样可以

this.setState(function(){
  conuter:state.counter+props.increment
})

(3)State的更新会被合并

当你调用setState()的时候，React会把你提供的对象合并到当前的state

例如，你的state包含几个独立的变量

constructor(props){
  super(props)
  this.state = {
    posts:[],
    comments:[]
  }
}

然后你可以分别调用serState()来单独的更新他们

componentDidMount(){
fetchPosts().then(responsr ={
  this.setState({
    posts:response.posrs
  })
})
}

这里的合并是浅合并，this.setState({posts}）完整保留了this.state.comments，但是完全替换了this.state.comments

12、React阻止默认行为和传统的Html的区别

在传统的Html中，通过返回false的方式来阻止默认行为

在React中，必须显式的使用preventDefault来阻止默认方式

传统的Html:

<a href="#" onclick="return false">
<a/>

在React中:在这里this的绑定我就不写了

function handerclick(e){
  e.preventDefault
}
return(
  <a href="#" onClick={handleclick}>
  </a>
)