常建57

路漫漫其修远兮。。。

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

1.React 是一个用于构建用户界面的 JAVASCRIPT 库
2.React 特点:
a.声明式的设计
b.采用虚拟dom,最大限度的减少dom操作
C.组件化,可以复用
D.单向响应的数据流,减少重复代码,比数据绑定更简单

3.babel.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。
4.jsx 优点:
a.类型安全的,在编译过程中就能发现错误
b.jsx执行更快,它在编译为javascript代码后进行了优化

在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

5.如果我们需要向组件传递参数,可以使用 this.props 对象,
6。React State(状态)
getInitialState
this.setState()

7.state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变
getDefaultProps() 方法为 props 设置默认值
sample
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);

8.Props 验证使用 propTypes, 当向 props 传入无效数据时,JavaScript 控制台会抛出警告。

9.React 组件 API
设置状态:setState
替换状态:replaceState
设置属性:setProps
替换属性:replaceProps
强制更新:forceUpdate
获取DOM节点:findDOMNode
判断组件挂载状态:isMounted

a.setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
b.props相当于组件的数据流,它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时,我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染,可以使用setProps()。

 

posted on 2018-02-01 09:05  常建57  阅读(92)  评论(0编辑  收藏  举报