React基本语法总结

创建项目

在命令行窗口输入

npx create-react-app 项目名称

1.jsx中表达式

  原生常规变量
  原生js方法调用
   三元运算符使用

const name='zhangsan'
const getage=()=>{
  return 18
}
const flag=false
function App() {
  return (
    <div className="App">
      {name}
      {/*  //渲染函数返回值*/}
      {getage()}
      {flag ?'真棒':"你好菜"}
    </div>
  );
}

export default App;

2.列表渲染

进行列表渲染

 * 技术方案：map  重复渲染那个模板就return谁 不能用foreach没有return

 * 注意事项L： 遍历列表时，需要提供一个不可重复的key,提高diff性能

const song=[
  {id:1,name:'像我这样的人'},
   {id:2,name:'云烟成雨'},
    {id:3,name:'老男孩'},
     {id:4,name:'安河桥'},
]
function App() {
  return (
    <div className="App">
     <ul>
       {song.map(item=><li key={item.id}>{item.id}-{item.name}</li>)}
    
     </ul>
    </div>
  );
}

export default App;

 3.条件判断

条件渲染：根据条件渲染HTML结构

 * 技术：使用三元运算符或者逻辑与(&&)运算符

 * 对于复杂逻辑：模板中尽量保持精简、、

 * type:1  2   3

 * 1->h1  2->h2   3->h3

 * 技术：对于复杂的多分支收敛成一个函数，通过专门函数来写逻辑分支，模板中只需调用

const flag=true
const gettype=(type)=>{
if(type===1){
  return <h1>h1</h1>
}
if(type===2){
  return <h1>h2</h1>
}
if(type===3){
  return <h1>h3</h1>
}
}
function App() {
  return (
    <div className="App">
      {/* 三元运算符 */}
    {flag ? '为真':'假的'}
    {flag ? (
      <div>
    <span>你好啊</span>
    <p>今天天气挺好</p>
    </div>):null}
    {/* 逻辑与 */}
    {true &&<sapn>逻辑与</sapn>}
    {/* 复杂逻辑 */}
    {gettype(3)}
    </div>
  );
}

export default App;

 4.样式控制

jsx中样式控制

 行内样式  

 类名样式  className

const style={
  color:'blue',
  fontSize:40
}
function App() {
  return (
    <div className="App">
    <span style={{color:'red'}}>你好啊</span>
    <span style={style}>今天天气很好</span>
    </div>
  );
}

export default App;

 动态样式：用三元运算符进行控制

5.注意事项