React的初体验

现在的需求是要打印出0这个数字

// 1. 可以使用React.createElement这个函数去实现
 
// 它目前接收三个参数,
/*
1. 元素名称 (div, button,span ......)
2. 元素class 使用 className声明
3. 元素内容
*/
const App1 = React.createElement('div',{className:'red'},0)
 
// 然后在 React中渲染一下,使用Render函数即可
 
/*
render函数目前接收两个参数
1. 需要渲染的框架
2. 需要挂载的元素
*/
ReactDOM.render(App1,document.getElementById('root'))

 

 

 

 

现在我们改动一下，再生成一个按钮试图让0可以+1

let n = 0
const App1 = React.createElement('div',{className:'red'},[n,
  React.createElement('button',{onClick:() => {
    n+= 1
  }},"+1")
])
 
ReactDOM.render(App1,document.getElementById('root'))

 

 

 

然而当我们点击的时候n的显示还是n，使用log可以发现其实n的值是变更了的，这就涉及到一个js的基础知识6个6，

我们只需要吧当前函数封装一下，并且在click事件中再次render即可

let n = 0
const App1 = ()=> React.createElement('div',{className:'red'},[n,
  React.createElement('button',{onClick:() => {
    n+= 1
    ReactDOM.render(App1(),
  document.getElementById('root')
  )
  }},"+1")
])
 
ReactDOM.render(App1(),document.getElementById('root'))

注：在js中引入css的方法可以使用 import './xxx.css'

 

---

 

如果每一个简单的点击按钮都去这么做这将会是一个庞大的工程，不过幸好React拥有JSX

// 我们只需要把  React.createElement 去掉就可以了
// 注意一定要加上return()
const App = ()=>{
    return(
    <div className="red">
    {n}
    </div>
  )
}

 

JSX语法会自动翻译当前语法，如果想在div中插入js语句需要在js语句外面包裹{ }

// 最后在render中使用 <App /> 渲染就可以了
const render = () => (ReactDOM.render(<App/>,
  document.getElementById('root')
  ))
  render()

 

---

 

控制语句

在Vue中我们只需要使用 v-if , v-else 在React中我们可以这样

let n = 0
const App = ( )=>{
  return(
    <div>
       {
       n===0 ? <div>我被显示了</div> : <div>我被隐藏了</div>
      }
    </div>
  )
}

 

 

甚至可以写成 if else

let a
if(ture){
    a = <div>...</div>
}else{
    a = ...
  
}
  
  renturn a

 

---

 

循环语句

在Vue中我们可以使用 v-for ,而在React中我们要

const Component = (props) =>{
    props.number.map(...)
}