React基础

1. React简介

MVC

M:model数据存储
V：view 视图 实践的操作
controller：view和model的中转，通过model层改变view渲染

MVVM

双向通信绑定

严格来说，react只是view的部分，更过的是视图上的渲染。vue参考了mvvm，跳过了viewModel，并不完全符合mvvm，基于MVVM，支持ref直接操作dom的方式，形成一个框架。

2.JSX

JSX称为JS的语法扩展，在view层将内容书写进去，可以包含一些逻辑，通过逻辑与web组合实现一个基本的react描述。相比于html，它更接近于JS。

2.1 预防XSS攻击

2.2 JSX表示对象

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Babel会把JSX转移成一个名为React.createElement()函数调用

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

通过React.render,将JSX渲染为DOM

// 使⽤ReactDOM.render
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

3.props和state

props ：属性

组件无论是使用函数声明还是通过class声明，都绝不能修改自身的props，props 作为组件对外通信的一个接口，为了保证组件像纯函数一样没有响应的副作用，所有的组件都必须像纯函数一样保护它们的props不被修改

state ：组件本身的一个作用域

• 只能通过setState赋值
• 更新可能是异步
  可以让setState接受一个函数而不是一个对象，这个函数将上一个state作为第一个参数，此次更新被应用时的 props 做为第二个参数

// Correct
this.setState((state, props) => ({
 counter: state.counter + props.increment
}));

• State更新会被合并

componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

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

• 只在当前的组件⾥⽣效，属于组件内的属性，重复实例化相同的组件，内部的内存地址也是
  不⼀样的

总结：

1. setState 只在合成事件和⽣命周期中是“异步”的，在原⽣事件和 setTimeout 中都是同步的
2. setState的“异步”并不是说内部由异步代码实现，其实本身执⾏的过程和代码都是同步的， 只是合成
   事件和钩⼦函数的调⽤顺序在更新之前，导致在合成事件和钩⼦函数中没法⽴⻢拿到更新后的值，形式
   了所谓的“异步”， 当然可以通过第⼆个参数 setState(partialState, callback) 中的callback拿到更新后
   的结果
3. setState 的批量更新优化也是建⽴在“异步”（合成事件、钩⼦函数）之上的，在原⽣事件和
   setTimeout 中不会批量更新，在“异步”中如果对同⼀个值进⾏多次 setState ， setState 的批量更新策
   略会对其进⾏覆盖，取最后⼀次的执⾏，如果是同时 setState 多个不同的值，在更新时会对其进⾏合并
   批量更新。

4.生命周期

旧版生命周期：
旧版生命周期

新版生命周期
新版生命周期

render

是class组件必需的⽅法
获取最新的 props 和 state
在不修改组件 state 的情况下，每次调⽤时都返回相同的结果

constructor

如果不初始化 state 或不进⾏⽅法绑定，则不需要为 React 组件实现构造函数。

• 通过给 this.state 赋值对象来初始化内部 state。
• 为事件处理函数绑定实例

constructor(props) {
  super(props);
  // 不要在这⾥调⽤ this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}
1. 不要调⽤ setState()
2. 避免将 props 的值复制给 state
this.state = { color: props.color }; // wrong

5.事件处理

6.条件渲染

1.if else渲染

2.与运算符 &&

第一个值为false 会返回表达式本身 ：0

3.三元运算符

4.如何阻止组件渲染