React学习笔记.md

React官网学习笔记

扩展

Pete Hunt: React: Rethinking best practices -- JSConf EU 2013

其他

1. 受控组件和非受控组件
2. diff 算法

JSX

const element = <h1>hello world</h1>;

概念：

1. jsx是JavaScript语法扩展
2. jsx也是对象

特性：

1. jsx可以插入表达式
2. 属性名驼峰写法 区别于原生HTML tabindex=>tabIndex, class=>className
3. 防注入攻击XSS，渲染前对特殊字符转码并转为字符串处理

元素渲染

Rendering Elements

1. React元素是不可变的，一旦创建就不能更改其children或者属性。
2. An element is like a single frame in a movie: it represents the UI at a center point in time.(特别形象)
3. React DOM会比较元素内容先后不同，渲染过程中只更新改变的部分。

组件和属性

Components and Props

1. 概念来说，组件就好像js方法，接受一些参数(props)，输出对应的React元素
2. 两种创建方式 Functional、Class Components
3. React组件名大写开头，区别于DOM原生标签
4. 所有组件都必须像纯函数那样使用props

State和Lifecycle

1. State类似props，但是state是组件私有和控制的。
2. State 不能直接改变 如this.state.comment = 'hello';
3. this.props this.state更新都是异步的，性能优化合并批处理,
   不要依赖其值做下一次计算

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

通过setState第二种形式接受函数，而不是接受对象来处理。

this.setState((prevState, props) => {
    counter: prevState.counter + props.increment
})

4. 状态更新合并， 调用setState，React将提供的对象合并到
   当前状态。状态更新合并是浅合并。
5. 数据自顶向下流动，通过props传递到组件

Handling Events事件处理

与DOM事件不同的地方
1 React事件书写驼峰写法
2 如果是jsx写法 需要传入函数而不是字符串来表示
传统HTML

<button onclick='activeLasers()'>Active Laser</button>

React写法

<button onclick={activeLasers}>Active Laser</button>

3 html中事件采用return false;来阻止默认行为，在React中
采用e.preventDefault()来处理
4 几种事件绑定方式

• 在构造函数中使用bind绑定this
• 在调用时候使用bind绑定this
• 在调用时候使用箭头函数
• 使用属性初始化器语法
  参考React事件绑定几种方式对比

class Toggle extends React.Component {
    constructor(props) {
      super(props);
      this.state = {isToggleOn: true};
      // 方式1 在构造函数中使用bind绑定this
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
      }));
    }
    
    handleClick2() {
        console.log('handleClick2');
    }

    // 方式4： 属性初始化器语法
    handleClick4 = () => {
        console.log('handleClick3')
    }

    render() {
      return (
          <div>
                <button onClick={this.handleClick}>
                    click
                </button>
                {/*方式2 在调用的时候采用bind绑定this*/}
                <button onClick={this.handleClick.bind(this)}> 
                    click2
                </button>
                {/*方式3 在调用时候采用箭头函数 会有性能问题不推荐*/}
                <button onClick={() => this.handleClick3()}>
                    click3
                </button>
                <button onClick={this.handleClick4}>
                    click4
                </button>

          </div>
        
      );
    }
  }
  
  ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
  );
}

条件渲染

1. jsx中使用条件表达式 if...else 三目表达式来选择性渲染元素
2. 通过return null;阻止组件渲染，不影响组件生命周期

列表和Keys

遍历渲染组件时候，需要加key，帮助React标识组件改变 增加删除等。
diff算法了解一下

状态提升

共享组件的数据，推荐将这些状态提升到最近的父组件管理。
在组件编写时候需要去考虑如何拆分组件进行编写。

组合和继承

1. 组件可以接受任意元素包括数据类型 React元素 或者函数
2. 组件之间复用UI无关的功能(通用方法)，建议提取到单独JavaScript模块中。