React学习笔记.md

React官网学习笔记

扩展

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

其他

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

JSX

const element = 

hello world

;

概念:

  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
})
  1. 状态更新合并, 调用setState,React将提供的对象合并到
    当前状态。状态更新合并是浅合并。
  2. 数据自顶向下流动,通过props传递到组件

Handling Events事件处理

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


React写法


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 (
          
{/*方式2 在调用的时候采用bind绑定this*/} {/*方式3 在调用时候采用箭头函数 会有性能问题不推荐*/}
); } } ReactDOM.render( , document.getElementById('root') ); }

条件渲染

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

列表和Keys

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

状态提升

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

组合和继承

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

你可能感兴趣的:(React学习笔记.md)