react

1.jsx
    jsx模板定义
    const dom=(
        <div>hello world</div>
    )
    等于
    const dom=React.createElemenet('div','hello world')
    模板挂载
    ReactDOM.render(dom,document.getElementById("app"))
2.组件定义
    2.1 函数组件定义
    function Hello(props){
        return (        //组件输出
            <div>Hello {props.name}</div>
        )
    }
    export default Hello
    2.2 class组件定义
    class Hello extends React.Component{
        constructor(props){
            super(props)
            this.state={
                name:hkj
            }
        }
        render(){               //组件输出
            return(
                <div>Hello {this.props.name}</div>
            )
        }
    }
    export default Hello       
    ps：extends继承实现其实是createClass的语法糖 
    ps:组件名必须大写
    2.3 createClass组件定义
    const Hello = React.createClass({
        getInitialState(){      //同state,必须有返回值
            return {
                name:'hkj'
            }
        }
        getDefaultProps(){      //设置props默认值
            return {
                msg:'hello'
            }
        }
        render(){
            return (
                <div>Hello {this.props.name}</div>
            )
        }
    })
    export default Hello
    2.4 组件渲染
    const dom=(<Hello name='hkj'>);
    ReactDom.render(dom,document.getElementById("app"))
    输出Hello hkj
    2.5 组合组件
    import Hello from "./Hello"
    class App extends React.Component{
        render(){
            return (
                <div>
                    <Hello name="hkj" />
                    <Hello name="world" />
                </div>
            )
        }
    }
    React.render(<App />,document.getElementById("app"))
    ps:一般来说React应用顶层是一个App组件，按照层级关系向下扩展
3.state(局部数据)
    3.1 数据定义
    class Hello extends React.Component{
        constructor(props){
            super(props);
            this.state={
                name:'hkj'
            }
        }
        render(){
            return (
                <div>hello {this.state.name}</div>
            )
        }
    }
    3.2 数据设值
    this.setState({
        name:'hello world'
    })
    ps:不可直接操作state，必须使用此方法进行覆盖式赋值。
    3.3 异步更新
    this.setState({
        name: this.name + 'hahahah' + this.props.name
    })
    //由于state和props可能是异步更新的，所以此方法返回结果可能不正确
    this.setState((prevState,props)=>{
        name: prevState.name + 'hahah' + props.name
    })
    //推荐使用此方法
    3.4 其他api
    this.replaceState((prevState)=>{
        name: prevState.name
    })
    //replace同setState,但未设置的state将会全部删除
    this.setProps()
    //同setState
    this.replaceProps()
    //同replaceState
    this.forceUpdate()
    //强制更新，组件及子组件重新渲染即使state及props无变化
4.props
    1.默认值
    getDefaultProps(){
        return {
            name:***
        }
    }
    2.类型验证
    propTypes:{
        optionalArray: React.PropTypes.array,
        optionalBool: React.PropTypes.bool,
        optionalFunc: React.PropTypes.func,
        optionalNumber: React.PropTypes.number,
        optionalObject: React.PropTypes.object,
        optionalString: React.PropTypes.string,
        title: React.PropTypes.string.isRequired,       //表示该属性必须传入，且为string类型
    }
    3.props传值
    const Child=React.createClass({
        render(){
            return (
                <a {...this.props}>         //获取父级传入的所有属性
                    {this.props.children}       //组件中所有子节点，对应下面的h1和h2
                </a>
            )
        }
    })
    ReactDOM.render(
        <Child href='/a' className='a'>
            <h1>子组件</h1>
            <h2>hahaha</h2>
        </Child>
        ,document.body)
5.生命周期钩子
    componentWillMount
    组件渲染之前调用
    componentDidMount
    第一次渲染后调用，可访问到dom,适用于ajax请求
    componentWillUnmount
    组件移除前调用
    componentWillUpdate
    接收到新的props与state但未更新时调用。在初始化或强制更新时不调用
    componentDidUpdate
    组件更新后马上调用，初始化时不触发
    componentWillReceiveProps
    组件接收到一个新的props(更新后)调用。初始化时除外
    shouldComponentUpdate
    组件接收到一个新的props及state时调用。初始化及强制更新除外，返回一个boolean值
6.事件处理
    6.1 定义
    <button onClick={this.btnClick.bind(this)}>点击</button>
    或者
    this.btnClick=this.btnClick.bind(this)
    <button onClick={this.btnClick}>点击</div>
    或者
    <button onClick={(e)=>btnClick(e))}
    ps:如果不改变this指向，调用时this指向的将会是button标签，而不是react组件
    6.2 调用
    btnClick(e){
        e.preventDefault();     //使用此方法阻止默认事件
    }
    6.3事件传参
    <button onClick={this.btnClick.bind(this,name)}>点击</button>
    btnClick(name,e){
        console.log(name)
    }
    ps:事件参数隐式传递，name可不写
    <button onClick={e=>this.btnClick(name,e)}
    btnClick(name,e){
        console.log(name)
    }
    ps:箭头函数形式，e为显示传递
7.条件渲染
    7.1 if渲染
    class Hello extends React.Component{
        const flag=this.props.flag;
        render(){
            if(flag==='登录'){
                return (
                    <div>登录</div>
                )
            }else{
                return (
                    <div>注册</div>
                )
            }
        }
    } 
    7.2  &&渲染
    class Hello extends React.Component{
        render(){
        const len=this.state.array.length;
        return({
            len>0&&<div>长度大于0</div>
            }
        )
    }
    7.3 三目运算符渲染
    render(){
        return (
            {
                isActive?(<div>以激活</div>):(<div>未激活</div>)
            }
        )
    }
    7.4 阻止组件渲染
    render() {
        const hide=this.props.show
        if(hide){
            return null
        }
    }
8.列表渲染
    render() {
        return (
            <ul>{list.map((item,index)=>{
                <li key={index}>{item}</li>
            })}</ul>
        )
    }
    ps:key用来帮助react识别列表数据增加或删除，定义在map上下文中
9.DOM节点获取
    Class Hello extends Component{
        componentDidMount(){    //虚拟dom挂载后才能获取到真实dom
            React.findDOMNode(this.refs.nodeH).focus()      //获取
        }
        render(){
            return (
                <div>
                    <input ref="nodeH">input节点</h1>
                </div>
            )
        }
    }