React入门知识点整理

一：React的特点

• 专注于View
• 虚拟Dom
• 单向数据流动
• 组件化

二：JSX

1：JSX是：

• 基于ECMAScript的一种新特性
• 种定义带属性树结构的语法

2：JSX的特点

• 类XML语法容易接受
• 增强JS语义
• 结构清晰
• 抽象程度高
• 代码模块化

3：JSX语法

• 自定义组件名首字母要大写
• 组件与组件之间可以嵌套
• 编写JSX时，大括号中不可以写语句(例如，if语句，switch语句，for 语句等等)，但是可以写求值表达式

不能使用语句的解决方案： 用三元表达式:

var HelloWorld = React.createClass({
    render: function(){
        return <p className="test">hello{this.props.name ? this.props.name : 'world'}</p>
    }
});
React.render( <div style={style}><HelloWorld /></div> ,document.body );
复制代码

通过变量赋值的方式:

var HelloWorld = React.createClass({
    getName: function(){
        if(this.props.name){
            return this.props.name;
        }else{
            return 'World';
        }
    },
    render: function(){
        var name = this.getName();
        return <p className="test">hello {name}</p>
    }
});
React.render( <div style={style}><HelloWorld name="hmy" /></div> ,document.body );
复制代码

直接把变量去掉，在大括号中调用函数； 使用比较运算符：或||:

var HelloWorld = React.createClass({
    render: function(){
        return <p className="test">hello {this.props.name || 'Wrold'}</p>
    }
});
React.render( <div style={style}><HelloWorld name="hmy"/></div> ,document.body);
复制代码

• JSX的标签名、函数名都是采用驼峰命名
• 在JSX里要用html和class属性时，需要写成htmlFor和className

4.非DOM属性：dangerouslySetInnerHTML、ref、key

• dangerouslySetInnerHTML: 在JSX中直接插入HTML代码
• ref(reference的缩写)，父组件引用子组件
• key: 提高渲染性能 Array生成结构时是必须加上key
• **React.findDOMNode(component)**获取到组件中真实的DOM 必须有一个 ref 属性，然后 this.refs.[refName] 就指向这个虚拟 DOM 的子节点，最后通过 React.findDOMNode 方法获取真实 DOM 的节点
• forceUpdate()：强制更新

5.注意点

• 内容类似的组件尽量成同一个组件;
• 列表类型的元素一定要加上key

三：组件的生命周期

1：组件的生命周期：

• 初始化->运行->销毁

2：不同生命周期内可以自定义的函数

• 初始化阶段:
  • getDefaultProps 只调用一次，实例之间共享引用；获取实例的默认属性
  • getInitialState 必须返回一个object或者null;初始化每个实例特有的状态；获取实例的初始化状态
  • componentWillMount render 之前最后一次修改状态的机会；组件即将被装载，组件即将被渲染在页面上
  • render 只能访问this.props和this.state,只有一个顶层组件，不允许修改状态和DOM输出。 组件在render函数中生成虚拟的DOM节点，最后由react将虚拟的DOM节点渲染成真正的DOM节点，并放置在页面中
  • componentDidMount 成功render并渲染完成真实DOM之后触发，可以修改DOM；组件在真正被装载后调用（即，这个函数被调用的时候，组件已经被渲染到了页面上） 注意点：getDefaultProps 只会在组件的第一个实例被初始化的时候调用，同一个组件的所有实例拿到的默认属性都是一样的
• 运行中阶段
  • componentWillReceiveProps 父组件修好属性触发，可以修改新属性、修改状态；
  • shouldComponentUpdate 当组件接收到新属性或者新状态的时候就会促发这个函数（组件是否需要更新),返回false会阻止render调用
  • componentWillUpdate 组件即将更新，不能修改属性和状态
  • render 跟初始化的 render一样
  • componentDidUpdate 跟初始化的componentDidMount一样，真正的DOM被渲染后调用，可以修改DOM
• 销毁阶段
  • componentWillUnmount 在删除组件之前进行清理操作，比如定时器和事件监听器

3：API

• React.findDOMNode 查找DOM节点
• React.unmountComponentAtNode 删除组件；参数必须是React.render的第二个参数

四：React属性和状态

• 属性的定义

props (properties简写)：属性往往与生俱来、无法自己改变的；在React中，组件本身是不能修改自己属性，父组件能够修改它的属性，它也可以修改子组件的属性；

• 属性的用法

第一种：

<HellWorld name= variable  />  => 例如："Tim" | {123} | {"Tim"} | {[1,2,3]}{variable}
复制代码

第二种:

var props = {
    one : '123',
    two : 321
}
<HelloWorld  {...props}/>
复制代码

第三种: 不常用

var instance =React.render(<HelloWorld><HelloWorld>,document.body);
instance.setProps({name:'Tim'});
复制代码

• 状态的含义

状态是由事物自行处理、不断变化的，在React中，状态是事物的私有属性，一个事物状态怎么样，如何改变状态都是由事物自己决定，父组件，子组件都没有权利改变它的状态;状态只跟组件本身相关，既不跟父组件相关，也不跟子组件相关

• 状态的用法 getInitialState: 初始化每个实例特有的状态 setState: 更新组件状态

• 属性和状态的对比

  • 属性和状态的相似点：

    • 都是纯JS对象
    • 都会触发render更新
    • 都具有确定性

  • 属性和状态对比

    描述	属性	状态
    能否从父组件获取初始值	能	不能
    能否由父组件修改	能	不能
    能否在组件内部设置默认值	能	能
    能否在组件内部修改	不能	能
    能都设置子组件的初始值	能	不能
    能都修改子组件的值	能	不能

3: 区分方法

组件在运行时需要修改的数据就是状态

五: React中的事件

• 常见事件类型

  • 触摸类：onTouchCancel、 onTouchEnd、 onTouchMove、 onTouchStart
  • 键盘：onKeyDown、onKeyPress、onKeyUp
  • 剪切： onCopy、onCut、onPaste
  • 表单类：onChange、onInput、onSubmit
  • 焦点：onFocus、onBlur
  • 滚动： onScroll onWheel
  • 鼠标： onClick、onContextMenu、onDoubleClick、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp
  • 鼠标拖拽： onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart

• 事件对象属性

  • 通用：
    • bubbles: 类型：boolean 表示事件是否可以冒泡
    • cancelable: 类型：boolean 表示事件是否可以取消
    • currentTarget: 类型：DOMEventTarget 代表注册监听器的对象（注意和target的区别：target代表当前目标对象（事件作用的对象））
    • defaultPrevented: 类型：boolean 是否静止默认行为
    • eventPhase: 类型:number 事件所处的阶段
    • isTrusted: 类型: boolean 是否可信（可信是指由用户出发的事件，不可信事件指的是JS代码触发的事件，如jQ的trigger方法）
    • nativeEvent: 类型: DOMEvent 原生的事件
    • preventDefault: 方法 阻止默认行为
    • stopPropagation: 方法 阻止冒泡
    • target : 类型:DOMEventTarget 代表当前目标对象（事件作用的对象）
    • timeStamp: 类型:number 事件触发的时间
    • type: 类型:string 事件类型

• 剪切：

  • clipboardData: DOMDataTransfer 提供了对剪贴板的访问

• 键盘：

  • altKey boolean 是否按了alt键
  • charCode Number 按键的字符编码
  • ctrlKey boolean 是否按下ctrl键
  • function getModiflerState(key) 是否按下辅助键 key String 按下的键 keyCode Number 按键的编码 locale String 本地化的一些字符串 location Number 位置 metaKey boolean window 下得win键；mac 下的蝴蝶键 repeat boolean 按键是否重复 shiftkey boolean 是否按下shift键 which Number

• 焦点：

  • relatedTarget DOMEventTarget