【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(){}