react学习随手记｜老陈打码&reactjs小书配合使用

• react元素渲染

let h1 = <h1>helloword</h1>;
//使用JSX的写法，可以创建JS元素对象
//注意：JSX元素对象或者组件对象，必须只有1个根元素（根节点）

• 案例使用

//实现页面的时刻显示
function clock(){
  let time = new Date().toLocaleTimeString()
  let element = (
    <div>
      <h1>time is {time}</h1>
      <h2>subtitle</h2>
    </div>
  )
  let root = document.querySelector('#root');
  ReactDOM.render(element,root)
}

clock()

setInterval(clock,1000)

• 函数式组件渲染 

function Clock(props){
  return(
    <div>
      <h1>time is {props.date.toLocaleTimeString()}</h1>
      <h2>这是函数式组建开发</h2>
    </div>
  )
}

function run(){
  ReactDOM.render(
    <Clock date={new Date()}/>,
    document.querySelector('#root')
  )
}

setInterval(run,1000)

• React JSX

优点：

1.JSX 执行更快，编译为JavaScript代码时进行优化

2.类型更安全，编译过程如果出错就不能编译，及时发现错误

3.JSX编写模块更加简单快速

注意：

1.JSX必须要有根节点

2.正常的普通HTML元素要小写，如果是大写，默认认为是组件

JSX表达式

1.由HTML元素构成

2.中间如果需要插入变量使用{}

3.{}中间可以使用表达式 

4.{}中间表达式中可以使用JSX对象

5.属性和html内容一样都是用{}来插入内容

JSX style 样式