【reac学习t】react元素渲染

  • react元素 是一个对象
  • react 只有一个根节点。
  • react元素通过 ReactDOM.render()函数渲染到页面上
React元素不可变,要更新就要重新渲染。

React 元素可以用三种方式渲染

 

首先定一个挂在的div <div id="example”></div>
  • 直接渲染 

      直接写一个element

       function tick() {

          const element=(

             <div>

                 <h1>hello world</div>

                 <h2>现在是{new Date().toLocaleTimeString()}</h2>

             </div>

          )

        }

        ReactDOM.render(element, document.getElementById(‘example') ;

        setInterval(tick,1000)       

     //element变了之后,react会自动更新到页面上。

 

  • 通过函数

       将要渲染的div元素,用函数包裹起来

    

    function Clock(props){

           return (

              <div>

                  <h1>hello world</div>

                  <h2>现在是{props.date.toLocaleTimeString()}</h2>

               </div>

           );

        }

        function tick() {

           ReactDOM.render(

               <Clock date={new Date()} />,

               document.getElementById('example')

           )

        }

       setInterVal(tick,1000)
      // 使用函数后,在render函数里可以用<Clock>标签,更加语义化。

 

  • 通过React.Component的ES6类

       通过class类来声明div内容。

       class  Clock extends React.Component {

          render() {

            return (

               <div>

                   <h1>hello world</div>

                   <h2>现在是{this.props.date.toLocaleTimeString()}</h2>

               </div>

            )

          }

       }

        function tick() {

           ReactDOM.render(

               <Clock date={new Date()} />,

               document.getElementById('example')

           )

        }

       setInterVal(tick,1000)

    // tick函数部分一样,还是可以用CLock直接替代掉element,这是组件声明的方法,在Component里面也要写render(){}

 

 
上一篇:三 Element-ui组件应用


下一篇:element源码修改并上传npm