React中的重要思想

1.函数式组件

思考，为什么会有函数式组件：因为js的渲染是一件很负担的事情，生命周期和状态管理导致程序运行的开销太大，所以这种没有上下文语境的开发技术出现。

函数式组件接收prop传递，React渲染过程本质上是在：根据数据模型（应用状态）来计算出视图内容。

const A=(props)=>{
    return <div>{props.name}+{props.age}</div>
}

2.单向数据流

单向数据流的好处，在数据定义和逻辑定义方面更加严谨，代码书写和约束根据分明。

举个例子： 在 React 中，数据仅朝一个方向流动，即从父组件流向子组件。如果数据在兄弟子组件之间共享，那么数据应该存储在父组件，并同时传递给需要数据的两个子组件。

实现步骤：

1.让父组件传递给子组件一个方法

2.在子组件去调用父组件传递的方法

父组件：
 <TodoItem
          content={item}
          index={index}
          key={index}
          list={this.state.list}
          deleteItem={this.handleItemDelete}
        />

 //   删除项
  handleItemDelete (index) {
    console.log (index);
    // immutable  state 不允许我们做任何改变
    this.setState (prevState => {
      const list = [...prevState.list];
      list.splice (index, 1);
      return {
        list,
      };
    });
  }

子组件：
render () {
    const {content} = this.props;
    return (
      <div onClick={this.handleClick}>
        {content}
      </div>
    );
  }

  handleClick () {
    // 子组件如何调用父组件的方法来修改父组件的内容:把父组件的方法传给子组件，在创建子组件的时候再传递一个方法
    console.log (this.props.index);
    // 子组件被点击的时候，调用父组件传过来的deleteItem()方法，同时把父组件传过来的index传给这个方法
    const {deleteItem, index} = this.props;
    deleteItem (index);
  }

3.概念理解

构思应用的state结构

actions -> actionCreator

这一层通常用来进行api设计，也就是页面交互的设计，例如网络请求啥的

reducers(redux工作完成，开始react组件)

这一层是react定义的接收页面数据流，响应页面组件

components页面设计

这一层笔记好理解，设计页面

containers(index页面，ReactDOM渲染)

可以理解为容器组件，类似layout

插曲学习一下：

浏览器的reflow和repaint

reflow（回流）：当浏览器上某个位置的布局发生了变化，浏览器会重新从根部开始计算该节点的布局。比如：向页面中添加、删除某一元素，折叠面板等，只要这些操作影响了页面上元素的位置或大小的变化，都将引起回流。

repaint（重绘）：只改变页面元素的颜色、字体等不影响布局的属性时，浏览器会进行重绘操作。

由上可见，相比repaint操作，reflow的耗时要更多。只要是动态的对页面进行修改，浏览器的reflow和repaint操作就是不可避免的。我们要做的就是尽可能的减少浏览器reflow和repaint的次数。