回顾Javascript React基础

前言

React核心的单向数据流、一切皆数据的state、不会改变的props，以及状态提升等等经常使用便不多总结，需要的看官方文档。

JSX

JSX 本质只是为 React.createElement(component, props, ...children)提供的语法糖！

以下两段代码等价（许多react的界面设计器通过这个原理，达到元数据转化React元素，实现界面化编程！）
嵌套就是多个create方法的嵌套。

function hello() {return <div className="red">Hello,<span>world!</span></div>;}"use strict";function hello() {return React.createElement("div",{ className: "red" },"Hello,",React.createElement("span",null,"world!"));}

需要循环和条件渲染可以使用map、三目，或者使用if/for在jsx代码之外！

//错误的！class A extends React.Component {render() {return <div>{if(){}else{}}</div>;//原来还蒙蔽的不知道为什么错了0.0}}

React.Component （组件）

创建组件的四种方式：

React.Component 方式

class Greeting extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}}

ES5

var createReactClass = require('create-react-class');var Greeting = createReactClass({render: function() {return <h1>Hello, {this.props.name}</h1>;}});//或者使用reactvar Greeting = React.create({render: function() {return <h1>Hello, {this.props.name}</h1>;}});

函数式

const Button = ({day,increment}) => {return (<div><button onClick={increment}>Today is {day}</button></div>)}

PureComponet

大多数情况下， 我们使用PureComponent能够简化我们的代码，并且提高性能，但是PureComponent的自动为我们添加的shouldComponentUpate函数，只是对props和state进行浅比较(shadow comparison)，当props或者state本身是嵌套对象或数组等时，浅比较并不能得到预期的结果，这会导致实际的props和state发生了变化，但组件却没有更新的问题。当然还是有解决的方法的，所以建议还是少用。

事件处理

事件绑定的四种方法：推荐使用第一第二种。

class Toggle extends React.Component {constructor(props) {{...}//方法一必须在这里绑定this.handleClick1 = this.handleClick.bind(this);}handleClick1() {this...}//方法二使用【属性初始化器语法】【需要开启babel stage-0以上】handleClick2=()=> {this...}render() {return (<div><button onClick={this.handleClick1}></button><button onClick={this.handleClick2}></button>//方法三在使用时绑定<button onClick={this.handleClick1.bind(this)}></button>//方法四在回调函数中使用 箭头函数/**渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。**/<button onClick={(e) => this.handleClick1(e)}></button></div>);}}