初步认识react中的React和ReactDOM的魅力

责编:menVScode 2017-06-17 13:38 阅读(663)
<body>
    <div id="app"></div>
    <!-- react:React的核心组件,第一个加载 -->
    <script src="js/react.min.js"></script>
    <!-- react-dom:ReactDOM对DOM节点的一些操作 -->
    <script src="js/react-dom.min.js"></script>
    <script src="js/browser.js"></script>
    <script type="text/babel">
             console.log(React);
             console.log(ReactDOM);
    </script>
</body>

        书写上面代码的时候要注意几点:

                引入brower.js,是为了将JSX语法进行编译,因此下面script标签类型是text/babel

                想要查看React或者ReactDOM具体包含哪些方法属性的时候,很多人会一不小心就小写了,这样子会报错的;

        1、console.log(React)结果

QQ截图20170617130343

            React对象中,说一下以后经常用到的方法:map、forEach是遍历的函数方式;PropTypes属性类型,可用来检测传进来的数据是否数字类型、字符串类型等等;forceUpdate强制更新;setState设置状态机;createElement用原生js方式创建组件;createClass可以用jsx语法创建组件。

        2、console.log(ReactDOM)结果

QQ截图20170617131625

        其中,findDOMNode用来获取元素节点,然后可以得到本身宽高等信息;render函数用来渲染组件的,有三个参数组件名字,渲染的位置,回调函数。

        3、用createElement创建一个组件

var MenVsCode = React.createElement(
    'div',//参数1:元素的标签
    {//参数2:元素的属性,没有属性写null
        'style':{
            'color':'red'
        },
        'id':'wodi1'
    },
    React.createElement(//参数3:子节点
        'h1',
        null,
        <em>Hello MEN</em>
    )
)
var HelloReact = React.createElement(
    'h1',
    null,
    'Hello MEN'
)
console.log(MenVsCode)
ReactDOM.render(
    MenVsCode,//参数1:要渲染的组件
    document.getElementById("app")//参数2:渲染的位置
    )

        createElement有三个参数:参数1是元素的标签;参数2是标签的属性,比如style行内样式、id名等等,如果没有的话就写null;参数3是参数1元素的子节点,可以是文本节点或者元素节点;

        ReactDOM渲染的时候,没有写成<MenVsCode/>是因为写组件的过程中没有用到jsx语法。

        现在不会用createElement来创建组件了,他有一个比较严重的缺点,就是参数3的子节点不能以变量的形式传入,会出错。比如上方代码写了HelloReact的组件,但是不能HelloReact变量传入MenVsCode中,要以嵌套的方式写入。

标签: react reactjs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码