react基础小结

1. 例子

import React from 'react'

import { render } from 'react-dom' 

// 定义组件

class Hello extends React.Component {

    render() {

         // return 里面写jsx语法

        return ( <p>hello world</p> )

    }

}

 // 渲染组件到页面

render( <Hello/>, document.getElementById('root') )

import React from 'react'
这里的react对应的是./package.json文件中dependencies中的'react'，即在该目录下用npm install安装的 react 。npm 安装的 react 的物理文件是存放在 ./node_modules/react中的，因此引用的东西肯定就在这个文件夹里面。

./node_modules/react/package.json中的"main": "react.js",，这里的main即指定了入口文件，即./node_modules/react/react.js这个文件

2. jsx语法
1）使用一个父节点包裹
jsx中不能一次性返回零散的多个节点，如果有多个则包含到一个节点中
如：

return (

    <div>

        <p>段落1</p>

        <p>段落2</p>

        <p>段落3</p>

    </div>

)

3. 注释
jsx中用{/**/}的注释形式
如：

return(

    //jsx外的注释

    <div>

        {/*jsx里面的注释*/}

        <p>hello</p>

    </div>

)

4. 样式

css样式：

<p className="class1">hello</p>

<!--用className代替class*/

内联样式：

<p style={{color:'red',fontSize:'20px'}}>hello</p>

<!--注意{{}},和驼峰写法-->

5. 事件

如：click

class Hello extends React.Component{

    render(){

        return (

            <p onClick={this.clickHandler.bind(this)}>hello</p>

        )

    }

    clickHandler(event){

        console.log('yes')

    }

}

注意：onClick驼峰写法

6. 循环

7. 判断

jsx中一般会用到三元表达式（表达式也是放在{}中的）

如：

return(

    <div>

        <p>段落1</p>

        {

            true

            ? <p> true </p>

            : <p> false </p>

            </div>

        }

    </div>

)

也可以这样使用：

<p style={{display: true? 'block' ? 'none'}}> hello world</p>

8. 数据传递&数据变化

1） props

如果

<Header title="Hello页面"/>

在Header组件中可以这样取到

render(){

    return(

        <p>{this.props.title}</p>

    )

}

在react中，父组件给子组件传递数据时，就是以上的方式，通过给子组件设置props，子组件获取props中的值便可完成数据传递。

2）props&state

如果组件内部自身的属性发生变化

class Hello extends React.Component{

    constructor(props,context){

        super(props,context);

        this.state={

            //显示当前时间

            now:Date.now()

        }

    }

    render(){

        return(

            <div>

                <p>hello world {this.state.now}</p>

            </div>

        )

     }

}

react会实时监听每个组件的props和state值，一旦有变化，会立刻更新组件，将结果重新渲染到页面上

var LikeButton = React.createClass({

        getInitialState: function (){

            return {liked : false};

        },

        handleClick: function (event) {

            this.setState({liked: !this.state.liked});

        },

        render: function(){

            var text = this.state.liked ? 'like' : 'haven\'t liked';

            return (

                <p onClick={this.handleClick}>

                    you {text} this click to toggle

                </p>

            );

        }

    });

3）智能组件&木偶组件

巴特西

react小结

react基础小结

1. 例子

最新文章

热门文章