react.js

注释：

     React JSX需要的注释格式是：

     {/*....*/}

     WebStorm默认的是：

     /*.....*/

 

作为子节点

{/*...*/}

作为内联属性

/*.....*/  ----------多行注释

// -----------单行注释

 

写内联样式：

var tdStyle = {

     border:0

}

<td style={tdStyle}></td>

 

refs

ref的值有两种类型，一种是字符串、一种是回调函数

 

contentEditable属性为true，允许用户在其内部输入富文本

 

访问受控的DOM节点

1.componentDidMount时期

2.事件处理器时期

 

模拟卸载而后重新挂载

componentDidUpdate:function(){

     this.componentWillUnmount();

     this.componentDidMount();

}

 

forceUpdate:就是重新更新render。有些变量不在state上，但是你又想达到这个变两个更新的时候，刷新render；或者state里的某个变量层次太深，更新的时候没有自动触发render，这时候都可以手动调用forceUpdate自动触发render

 

 

shouldComponentUpdate（）方法是判断是否有必要更新render（）,渲染页面，返回的结果是bool值，如果是false，则不用重新更新render，否则更新，默认值是true，该方法接受两个参数，即新的props和新的state

 

redux就是用来确保state变化的可预见性

主要的约束有：

1.state以单一对象存储在store对象中

2.state只读

3.使用纯函数reducer执行state更新

管理应用的 state

• 通过 store.getState() 可以获取 state

• 通过 store.dispatch(action) 来触发 state 更新

• 通过 store.subscribe(listener) 来注册 state 变化监听器

• 通过 createStore(reducer, [initialState]) 创建

 

React支持的元素

1.html元素

2.SVG元素

支持的属性

支持所有的data-*和aria-*属性

注意：所有的属性都是驼峰命名的，class属性和for属性分别改为className和htmlFor，来符合DOM API 规范

 

React特有的属性

key：可选的唯一的标识器。当组件在渲染过程中被各种打乱的时候，由于差异检测逻辑，可能会被销毁后重新创建，给组件绑定一个key，可以持续确保组件还在DOM中。

ref：获取真实dom时使用，this.refs.[refname].getDOMNode()。

dangerouslySetInnerHTML:提供插入纯HTML字符串的功能，主要为了能和生成的DOM字符串的库整合

 

 

批处理虚拟DOM的刷新

 

 

react中DOM节点如何绑定属性：使用data-属性名

 

 

 

React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理

React组件之间交流的方式有3种：

1.父组件向子组件传值     主要利用props来进行交流   

 注意 ：

           如果组件嵌套层次太深，那么从外到内组件的交流成本就变得很高，建议尽可能的减少组件的层次

2.子组件向父组件传值    主要利用子组件空置 自己的state然后告诉父组件的点击状态，然后在父组件中展示开来

3.没有任何嵌套关系的组件之间传值（ps：比如：兄弟之间的传值）

注意：

         如果组件有多层嵌套的情况下，你必须要一次传入回调函数给props来实现子组件向父组件传值