React 教程-By麦浪XPEKI

*通过createElement创建元素 HELLO Word

var el=React.createElement(type,[props],[children...]) 标签 属性 内容
React.render(el,document.getElementById("..."))

*虚拟DOM

在虚拟DOM上操作 通过render来挂载到真实的DOM
组件
React.createClass(meta)
内部需要render函数

*JSX

JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素。
var Jsxdemo=React.createClass({
render:function(){
var html=<div>
<div className="ez-led">Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">我是第三排</div>
</div>;
return html;
}
JSX 能让我们像是拼写字符串一样去写HTML、

*props

props 称之为 无状态组件 组件的表现都是通过外部传入的props属性 根据自身的状态来做出不同的反应
var Jsxdemo=React.createClass({
render:function(){
var number=this.props.setid;
alert(number); 这里能直接输出对象里的汉字
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
}
var html=<div>
<div className="ez-led" style={style}>Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">我是第三排</div>
</div>;
return html;
}
});

    ReactDOM.render(<Jsxdemo setid="11"/>,document.getElementById("jsxdemobox"));

*内联样式

var Jsxdemo=React.createClass({
render:function(){
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
}
var html=<div>
<div className="ez-led" style={style}>Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">我是第三排</div>
</div>;
return html;
}
});

*state 状态机

state - 组件的状态变量 保存组件的当前状态，可以再任何时候通过this.state来获取到当前状态
getInitialState() - 设置组件初始状态
setState(currentState) - 设置组件当前状态 会重新渲染
//getInitialState方法来设置初始化状态 也就是设置我们的 state {key:value} 其中key代表state指向的状态变量 value代表状态
getInitialState : function(){
return {open : true};
},
//这里是通过一个点击事件来重新设定状态机 必须要通过this.setState({option:!this.state.open}) 意思就是设置状态机的另一种状态
onClick : function(){
//读取并重设状态，这将触发重新渲染
this.setState({open : !this.state.open});
},
//在render来操控我们的虚拟DOM 记得return HTML代码
render : function(){
//根据状态设置样式
img = this.state.open ? "img/switch-on.png" : img = "img/switch-off.png";

            //返回元素
            return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>;
        }

• 生命周期

componentWillMount() - 组件实例即将挂接（初次渲染）时被调用
这个方法在整个生命周期中只会被调用一次。
componentDidMount() - 组件实例挂接（初次渲染）后被调用
这个方法在整个生命周期中只会被调用一次。
componentWillReceiveProps(nextProps) - 组件实例即将设置新属性时被调用
参数nextProps表示即将应用到组件实例上的新属性值。
这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。
shouldComponentUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用
参数nextProps传入即将应用到组件实例上的新属性值，参数nextState传入组件实例即将被 设置的状态值。如果这个方法返回false，那么组件实例就不会被重新渲染。除非我们明确地 知道，新的属性和状态不需要进行重新渲染，否则这个方法都应该返回true。
这个方法在初次渲染时或通过forceUpdate()方法进行渲染时不会被调用。
componentWillUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用
这个方法在初次渲染时不会被调用。注意：不能在此方法内调用setState()。
componentDidUpdate(prevProps, prevState) - 组件实例重新渲染后被调用
这个方法在初次渲染时不会被调用。
componentWillUnmount() - 组件实例即将从DOM树移除时被调用
这个方法在整个生命周期中只会被调用一次。

(访问DOM v0.14 版中 refs 指向的就是 DOM 节点，同时也会保留 .getDOMNode() 方法（带 warning），最终在 v0.15 版中去除该方法。)
首先要给你想获得DOM对象设定 ref=“q” ref 必须是全局唯一的
var el = React.findDOMNode(this.refs.q),
this.refs.q获取到的是虚拟DOM，在render方法执行之后，并且react已经完成了DOM的更新，才能通过 this.refs.city.getDOMNode() 来拿到原生的DOM元素。
使用 this.refs.xxx.getDOMNode() 或React.findDOMNode(this.refs.xxx) 可以获取到真正的 DOM 节点。

// 之前：
// var input = this.refs.giraffe.getDOMNode();
//
// v0.14 版：0.15版本以后
var input = this.refs.giraffe;
alert(input.value);

*表单

文本输入框
不要使用value属性设置文本输入框元素的初值，应当使用defaultValue：
//JSX
<input type ="text" defaultValue ="demo"/>
复选按钮
不要使用checked属性设置复选按钮的初始选中状态，应当使用defaultChecked：
//JSX
<input type ="checkbox" defaultChecked/>
单选按钮组
不要使用option元素的selected属性设置单选按钮组的初始选中状态，应当使用 select元素的defaultValue：
//JSX
<select defaultValue="A">
<option value="A">China</option>
<option value="B">India</option>
<option value="C">Japan</option>
</select>

*容器组件

在ReactDOM.render里面 ，组件要成双标签 {this.props.children}用于获取到我们的React的 子元素

ReactDOM.render(<Jsxdemo setid="11">我是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));
var Jsxdemo=React.createClass({
componentDidMount:function(){
var message=this.refs.bbbb;
// alert(message.value);
},
render:function(){
var number=this.props.setid;
// alert(number);
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
}
var html=<div>
<div className="ez-led" style={style}>{this.props.children}</div>
<div className="ez-led" ref="aaaa">2015-04-15</div>
<input type="text" className="ez-led" ref="bbbb" defaultValue="我是第三排"/>
</div>;
return html;
}
});

ReactDOM.render(<Jsxdemo setid="11">我是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));

*JSX可展开属性

我们可以再render里面

<div className="ez-slider" onMouseDown ={this.onMouseDown} onMouseMove ={this.onMouseMove} onMouseUp ={this.onMouseUp}/>
相等于
var props ={
className :"ez-slider",
onMouseDown :this.onMouseDown,
onMouseUp :this.onMouseUp,
onMouseMove :this.onMouseMove
};

//传入属性包
var rel =<div {...props}></div>;

var Jsxdemo=React.createClass({
// getInitialState:function(){

        // },
        componentDidMount:function(){
            var message=this.refs.bbbb;
            // alert(message.value);
        },
        onClick:function(){
            alert(0);
        },
        render:function(){
            var number=this.props.setid;
            // alert(number);
            var style={
                "color":"red",
                "fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
            }
            var options={
                className:"ez-led",
                onClick:this.onClick
            }
            var newhtml=<div {...options}>22222</div>;
            return newhtml;
        }
    });

ReactDOM.render(<Jsxdemo setid="11">我是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));

动画 CSS3 transition 思路就是利用状态机来判断 DOM状态
为元素声明transition样式
设置属性初始值，第一次渲染元素
设置属性目标值，第二次渲染元素

*默认属性

getDefaultProps:是设置默认属性 红色为相关代码
如果设置了value 则 弹出 10 如果没有设置 则 弹出 20

var ZZ=React.createClass({
    getDefaultProps:function(){
        return {
            value:20
        }
    },
    onClick:function(){
        alert(0);
    },
    render:function(){
        alert(this.props.value);
        var option={
            className:"maincsss",
            onClick:this.onClick
        }
        var html=<div {...option}>111111</div>;
        return html;    
    }
});
ReactDOM.render(<ZZ value="10"/>,document.getElementById("mainbox"));

mixin复用代码      meisen发音  混合柔和的意思  专门用来写公共模块的对象 并且通过minxins指向您的 mixin对象 来拷贝你的React组件中

varEzLoggerMixin={
log:function(){
//sth. happened here.
}
};
React.createClass({
mixins:[EzLoggerMixin],
render:function(){
//your render stuff.
}
});

//mixin就是存放公共能力的一个简单的对象而已。首字母可不大写 但是为了养成习惯 首字母还是大写的好 哦
var Minxintext={
log:function(){
alert("我是mixin");
}
};
mixins : [Minxintext],
然后在React实例里面的生命周期或者事件函数里面 通过 this. 你定义的mixin对象内部的函数

var Minxintext={
log:function(){
alert("我是mixin");
}
};
var ZZ=React.createClass({
mixins : [Minxintext],
getDefaultProps:function(){
return {
value:20
}
},
onClick:function(){
this.log();
},
render:function(){
// alert(this.props.value);
var option={
className:"maincsss",
onClick:this.onClick
}
var html=<div {...option}>111111</div>;
return html;
}
});
ReactDOM.render(<ZZ value="10"/>,document.getElementById("mainbox"));

map 循环

return (
<span>
{
datas.map(function(i){
return <span {...option} key={i.id}>我是{i.name}a a a </span>;
})
}
</span>
)