React初学笔记

最新推荐文章于 2021-02-11 07:51:53 发布

a伊雪

最新推荐文章于 2021-02-11 07:51:53 发布

阅读量308

点赞数

分类专栏： react 文章标签： js

本文链接：https://blog.csdn.net/u010565037/article/details/52872775

版权

react 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

一、基本概念

React.js
React.js 是 React 的核心库，在应用中必须先加载核心库。

ReactDOM.js
ReactDOM.js 是 React 的 DOM 渲染器，React 将核心库和渲染器分离开了，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法，第一个参数是 React 组件，第二个参数为 HTMLElement。

JSX
JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中。

组件
组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达，我们将要写的 React 代码绝大部分都是在做 React 组件的开发。

VIRTUAL DOM
React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。

单向数据流：one-way reactive data flow
React 应用的核心设计模式，数据流向自顶向下

二、组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。


var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

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

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。

注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。


var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

属性的写法上和 HTML 存在区别，在写 JSX 的时候，所有的属性都是驼峰式的写法，如：

function render() {
    return  <div className="...">
                <label htmlFor="..."></label>
                <input onChange="..."/>
            </div>
}

而原生的写法为:

    <div class="...">
        <label for="..."></label>
        <input onchange="..."/>
    </div>

Origin
1、React并不会通过String类型的Html片段生成DOM
2、在componentWillReceiveProps中调用setState()不会触发re-render
3、componentWillUpdate中不能调用this.setState()
4、在通过Ajax获取到数据，调用this.setState()之前，应该通过this.isMounted()确定当前的component已经处在渲染完成的阶段
5、父组件到子组件通过props传递数据，子组件向父组件传递数据通过global event方式来处理，即在root element上接受所有子组件的事件处理
6、移动设备的touch事件需手动开启：React.initializeTouchEvents(true)
7、setState(data, callback)中的callback是在re-render完成之后调用的

FLUX
1、Dispatcher分发来自页面事件行为的事件名称和数据到全局的Store中
2、Dispather中要注册各种事件及其对应的行为(更新Store)
3、通过使用类似于MicroEvent.js这样的类库，为Store提供对象的事件行为，监听它的数据变化
4、在componentDidMount中注册Store的行为，在componentWillUnmount中解绑Store的行为

JSX
1、组件的变量名必须大写，用于区分原生的Html标签和自定义组件
2、用大括号包裹的js表达式来表示组件的属性，替代原生写法的双引号
3、如果想给最终装换成的HTML元素添加自定义的属性，必须用前缀"data-“
4、props应该作为不可变常量使用，不能component.props.foo = x 这样使用
5、<Component {…someObj} /> 可以将someObj中的所有属性写进Component的props中
6、<Component {…someObj} attr=“higherLevel" /> 中的attr属性会复写someObj中的同名属性
7、JSX封装了React的原生接口为类XML协议的语法，使之更加易于编写
8、获取父级的属性用this.props，获取内嵌的子元素用this.props.children
9、为防止XSS攻击，提供安全性，在插入原生的HTML时需使用

<span dangerouslySetInnerHTML={{__html: rawHtml}}>

10、css的内嵌写法style，必须接受一个对象，其key是css属性名，多单词属性采用小驼峰写法，如果需要添加浏览器厂商前缀，则该前缀的首字母必须大写
11、除指定的某些元素(http://facebook.github.io/react/tips/style-props-value-px.html
)外，style中的属性值如果是纯数字会添加’px’后缀，如{height: 10} 编译成 height: 10px
12、通过this.transferPropsTo( subComponent ) 将当前组件的所有props传递给它的某个子组件，也可以通过{...this.props}的方式传递