欢迎指导与讨论 : )

  前言

    本文主要是笔者在React英文官网学习时整理的笔记。由于笔者水平有限,如有错误恳请指出 O(∩_∩)O

  一 、Tutoial 篇

    1 . React的组件类名的首字母必须是大写  var Comment = React.creatClass({..})  class Comment extends Component(){...}

    2 . 我们需要往一个对象里传入一些方法,并把这个对象以参数的形式传到React.creatClass( )里。其中最重要的方法是render( ),它会返回一棵组件树,并在最后把组件render(渲染)到HTML里

    3 . 组件内部tags(HTML标签)并不是正真的DOM节点,它们都只是React组件的实例。你可以把这些tags当做是标识,或者是数据的片段,而React会知道怎么处理它们。React也不会生成HTML字符串,因此默认对xss攻击是有保护作用

    4 . 数据通过property(属性)从父级组件传到子组件。在子组件,这些数据成为了this.props,而其它一些嵌套的元素变成了this.props.children

    5 . 当页面出现未经转换的HTML标签,比如 "This is <b>Blog</b>" ,这多半是React未了防止xss攻击而做的。当我们想把字符串里面的标签转换为正真的HTML,我们需要dangerouslySetInnerHTML

 rawMarkup: function() {
var rawMarkup = ...
return { __html: rawMarkup };
}
<span dangerouslySetInnerHTML={this.rawMarkup()} />

    6 . props一般是immutable( 不可变 ),我们需要引入statemutable可变 )。每当state改变时,组件就会re-render( 重新渲染 )它自己。this.state在组件内部是私有的属性,我们可以通过this.setState( )方法来设置、改变state。也能通过getInitialState( )方法来设置初始化的state

    7 . componentDidMount( )方法会在组件渲染在HTML的时候自动执行。因此我们可以在这个生命周期函数里fetch/Ajax异步获取我们需要的数据,然后this.setState,把数据渲染到界面上

    8 . Callbacks as props。父组件把某些函数当做property传给子组件。当子组件触发这个函数时,父组件就能获取变化,并做进一步处理。

  二、Displaying Data / JSX

    1 . React 内部使用迅速、性能强大的虚拟DOM和diffs算法,用来计算'谁'是需要被更新的。React 不会随意操作DOM,除非这个操作是必须的。

    2 . 限制:React组件函数最多只允许渲染一个根节点,如果你的组件包含多个节点,请把它们包含在一个大的根节点里面。  

    3 .  JSX语法是可选的,我们也选择使用原生JS去写我们的组件,但是JSX语法更加高效、易懂。JSX可以同时渲染HTML标签(小写)和我们开发的组件(首字母大写)

    4 . 注意:DOM里面的属性class(类名)和for(),在JSX里面的写法是classNamehtmlFor

    5 . 布尔值属性 <input type="button" disabled={false} /> 。三元表达式  var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>

    6 . 同名属性会被后面的属性重写

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;

    7. 如果我们想为原始的HTML标签增加自定义属性,我们必须为该属性加上前缀 data- 否则React不会为我们渲染这个自定义属性

    

  三、UI / Component / Props / State

    1 . 函数自动绑定。在es5里,组件内部的方法都会自动绑定到组件实例上。当我们使用es6时,才有必要绑定this

// es6
<div onClick={this.tick.bind(this)}>
// 箭头函数
<div onClick={() => this.tick()}>
// 预绑定
constructor(props) {
//...
this.tick = this.tick.bind(this);
}
<div onClick={this.tick}>

    2. 事件代理。React 不会真正地为元素节点创建箭头事件和对应处理函数。当React启动的时候,它会把所有的事件箭头放到单独的一个根节点上面。当有元素插入或者被移除,对应的事件处理函数也会被添加或移除。

      3.   组件就是一个状态机。当我们使用setState的时候,React会根据新的state,非常高效(diff算法)地重新渲染组件

    4. 如何构建一个可复用的组件。( 1 ) Prop validation(类型验证) ( 2 ) Default Props Values(设置默认props值) ( 3 )  由props驱动内部state

   5 . es6语法。( 1 ) 没有自动绑定this ( 2 ) 没有Mixin

     6 .  修复setState为'异步'所带来的副作用

 // Correct
this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); // 注意:自加操作符 要写成++count(先加再返回),而不是count++(返回了原值再加 无效果)

 

  四、表单

    1 . 表单组件的某些属性(props)能够通过交互发生改变。value属性( <input><textarea> )、checked( checkbox、radio )、selected( <option> )。同时,当这些表单组件的state或者value改变的时候,也会触发挂载到该组件上的onChange( )事件

    2 . 受限(被控制 controlled component)当表单组件设置了value时(比如<input type='text' value='hello' >),就变成了controlled components,你会发现你的输入对表单并没有效果。这是因为React将该组件的value值声明为'hello'了。通常的处理是,获取input的React元素(refs、event),并在它上面挂载onChange方法

 getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}

    3 .  Uncontrolled component 不受限的表单控件。<input type='text'/> 向该表单组件进行输入,会立刻从view层得到反应:我们的输入有效了,而不是像上面的例子一样,怎么输入都没有效果。如果要对输入值进行监听,可以设置onChange方法并挂载到该组件上面。同时,我们可以设定默认输入值defaultValue、defaultChecked <input type='text' defaultValue='hello' />

    4 . select表单组件

// 单选
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
// 多选
<select multiple={true} value={['B', 'C']}>.

  五、浏览器环境 / Refs

    1 . Virtual dom( 虚拟dom )。React是很快的,因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述符。组件内部的render( )方法也会返回一个DOM的描述符。react通过对比内存中的描述符和组件的描述符,会选择最快的方式更新浏览器的Dom视图。另外,我们在React内部使用的'事件系统',其实全都是React内部的'虚拟事件',React会确保这些事件和事件对象都符合w3c规范,并以一种高性能的方式跨浏览器。

    2 . 组件通常有三种类型的生命周期

      ( 1 ) Mounting(这是一个组件初始化的生命周期)

        1 . getInitialState( ) 一个stateful的组件应该在这个时候声明并返回一个state对象

        2 . componentWillMount( ) 准备插入到Dom

        3 . componentDidMount( ) 已经插入到Dom

      ( 2 ) Updating(这是一个组件re-render重绘它自己的时候所要经历的生命周期)

        1. componentWillReceiviProps( nextProps ) 第一个参数是将接受到一个props的新值

        2 . shouldComponentUpdate(nextProps, nextState) 参数分别是props和state的新值

        3 . componentWillUpdate(nextProps, nextState)同上。在这个生命周期里,我们不能再调用setState

        4 . compoentDidUpdate( preProps, preState  )参数分别是props和state的上一个值

      ( 3 ) Unmounting

        1. componentWillUnmount( ) 当组件被移除前一刻会被执行

    3 .   React.render( )方法会返回一个virtual Dom元素,即组件的"引用" var helloInstannce = ReactDom.render(...) ,当这个组件是stateless的话,会返回null。注意:当我们使用JSX的时候,返回的只是一个ReactElement  var hell = <Hello />

    4 . 通过refs获取组件的实例

<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;

  

  六、Tips  

    1 . 行内样式。React会为某些具备单位的css属性默认添加 'px' 单位  var divStyle = {height: 10}; // rendered as "height:10px"

 var divStyle = {
color: 'white',
msTransition: 'all'
}; ReactDOM.render(<div style={divStyle}>Hello</div>, Node);

    2 . If-else 在JSX中的使用方法

     if-else 在JSX里面是没有效果的,因为JSX仅仅是一些调用函数和构造函数对象的语法糖。对于这个问题,React推荐有两种方法。( 1 ) 调用逻辑和render函数里面的return进行分离 ( 2 ) 在render函数内使用立即执行函数(显然第一种比较好)

// --- 1 ---
var loginButton;
if (loggedIn) {
loginButton = <LogoutButton />;
} else {
loginButton = <LoginButton />;
} return (
<nav>{loginButton}</nav>
);
// --- 2 ---
return (
<section>
<p>
{(() => {
switch (this.state.color) {
case "blue": return "#0000FF";
default: return "#FFFFFF";
}
})()}
</p>
</section>
);

    3 . 当我们使用  this.props.children 的时候要当心。虽然它大多数情况下会返回一个component数组 ( Array.isArray(this.props.children) => true  但当只有一个component的时候它只会返回一个component,而不是一个Array

    4 . componentDidMount( ) 一个添加Dom监听和初始化拉取数据的好地方

// --- 1 ---
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
}
// --- 2 ---
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
}, 

  七、插件

    1 . Animation( 动画 ) —— ReactTransitionGroup,这个插件能够让组件在插入或者离开Dom的时候进行一段小动画。 

// 1 . 基本用法
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
// in render function ...
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
// in style.css
.example-enter {
opacity: 0.01;
} .example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
} .example-leave {
opacity: 1;
} .example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}

      ( 2 ) 初始化动画  <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>

      ( 3 ) 自定义动画  <ReactCSSTransitionGroup transitionName{{enter:'enter',enterActive:'enterActive',leave:'leave',leaveActive:'leaveActive',appear:'appear',appearActive:'appearActive'} }>

       ( 4 ) 禁止动画  transitionEnter={false} or transitionLeave={false}

       ( 5 ) 渲染不同的组件  <ReactTransitionGroup component="ul">

    2 . 双向绑定插件 —— react-addons-linked-state-mixin

var LinkedStateMixin = require('react-addons-linked-state-mixin');

var WithLink = React.createClass({
mixins: [LinkedStateMixin],
getInitialState: function() {
return {message: 'Hello!'};
},
render: function() {
return <input type="text" valueLink={this.linkState('message')} />;
}
});

    3 . PureRenderMixin

// es6
import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
} render() {
return <div className={this.props.className}>foo</div>;
}
}

React官网学习笔记的更多相关文章

  1. express官网学习笔记

    npm init 创建一个package.json npm install express --save-dev 安装到项目依赖 便于多人开发 路由结构定义 app.METHOD(PATH, HAND ...

  2. Spring boot 官网学习笔记 - logging

    commons-logging和slf4j是java中的日志门面,即它们提供了一套通用的接口,具体的实现可以由开发者自由选择.log4j和logback则是具体的日志实现方案. 比较常用的搭配是com ...

  3. Spring boot 官网学习笔记 - Spring Boot 属性配置和使用(转)-application.properties

    Spring Boot uses a very particular PropertySource order that is designed to allow sensible overridin ...

  4. Spring boot 官网学习笔记 - Spring DevTools 介绍

    想要使用devtools支持,只需使用dependencies将模块依赖关系添加到你的构建中 运行打包的应用程序时,开发人员工具会自动禁用.如果你通过 java -jar或者其他特殊的类加载器进行启动 ...

  5. Spring boot 官网学习笔记 - Auto-configuration(@SpringBootApplication、@EnableAutoConfiguration、@Configuration)

    Spring Boot auto-configuration attempts to automatically configure your Spring application based on ...

  6. Spring boot 官网学习笔记 - Configuration Class(@import)

    推荐使用 Java-based configuration ,也可以使用xml we generally recommend that your primary source be a single ...

  7. Spring boot 官网学习笔记 - Using Spring Boot without the Parent POM,但是还要使用Parent POM提供的便利

    If you do not want to use the spring-boot-starter-parent, you can still keep the benefit of the depe ...

  8. Spring boot 官网学习笔记 - 开发第一个Spring boot web应用程序(使用mvn执行、使用jar执行)

    Creating the POM <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  9. Spring boot 官网学习笔记 - Spring Boot CLI 入门案例

    安装CLI https://repo.spring.io/release/org/springframework/boot/spring-boot-cli/2.1.1.RELEASE/spring-b ...

随机推荐

  1. 码代码新神器-Github Atom

    周末闲着没事,逛论坛发现了一个新的编辑器,由github发布的Atom编辑器.瞬间被吸引了,所以就去尝试着折腾了一下,后来发现这个编辑器确实很不错,他的特点就是两个字:优美!!! 下载地址,官方网站下 ...

  2. angular源码分析:angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  3. Spring(6)—— AOP

    AOP(Aspect-OrientedProgramming)面向切面编程,与OOP完全不同,使用AOP编程系统被分为切面或关注点,而不是OOP中的对象. AOP的引入 在OOP面向对象的使用中,无可 ...

  4. [SharePoint]javascript client object model 获取lookup 类型的field的值,包括user类型(单人或者多人)的值。how to get the multiple user type/lookup type field value by Javascript client object model

    1. how to get value var context = new SP.ClientContext.get_current(); var web = context.get_web(); v ...

  5. 解决xcode升级之后安装的插件失效

    title: 解决xcode升级之后安装的插件失效date: 2015-08-23 11:07:53categories: 编辑工具 tags: xcode 我的博客:http://daycoding ...

  6. Intent的七大组件——Android开发之路5

    ------Intent------ Android中三个核心组件——Activity.Services.BroadCastProvider都是通过Intent传递参数. startActivity( ...

  7. (三)Maven仓库介绍与本地仓库配置

    1.Maven本地仓库/远程仓库的基本介绍 示意图: 本地仓库是指存在于我们本机的仓库,在我们加入依赖时候,首先会跑到我们的本地仓库去找,如果找不到则会跑到远程仓库中去找.对于依赖的包大家可以从这个地 ...

  8. SqlServer--代码创建约束

    约束-保证数据完整性先用设计器创建约束,再用代码创建约束.数据库约束是为了保证数据的完整性(正确性)而实现的一套机制非空约束 (选择复选框)not null主键约束(PK)primary key co ...

  9. Nagios学习实践系列——产品介绍篇

    Nagios介绍 Nagios是一款功能强大.优秀的开源监控系统,它能够让你发现和解决IT架构中存在的问题,避免这些问题影响到关键业务流程. Nagios最早于1999年发布,它在开源社区的影响力是相 ...

  10. String与int之间的转换

    原文: http://www.360doc.com/content/10/1215/00/2258566_78225883.shtml