react入门笔记

1.JSX的用法

function App(){

let msg = 'react 的插值';

return (
 
{msg}
 
)
}

jsx中也可以绑定属性，绑定属性时不能加引号

function App(){
    let url= 'https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg';
    return (
        

            
        
    )
}

jsx中也支持一些简单的js运算， 也支持条件运算符（react 的条件渲染方式之一

function App(){
    let count = 10;
    return (
        

           
{ 1 + 1}
           
{count * 10}
        
    )
}

jsx中也可以使用es6的模板字符串, 支持字符串拼接操作

function App(){
    let count = 10;
    let msg = '新的一年';
    return (
        

           
{`${count} hello`}
  
           
{msg + '美妙人生'}
        
        
    )
}

在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都是允许的：

function App(){
    let count = 10;
    let ele ;
    // 变相的react的条件渲染
    if(count > 10){
        ele = (
《哪吒2》
)
    }else {
        ele = 
《唐探1900》
    }

    return (
        

            {ele}
        
    )
}

2.react的条件渲染

React 没有特殊的语法来编写条件语句，因此你使用的就是普通的 JavaScript 代码。例如使用 if 语句根据条件引入 JSX： if语句工作与JSX的外部， 即函数式组件的顶层作用域中， return 返回的模板就是jsx语法

function App(){
    let content;
    if (isLoggedIn) {
      content = ;
    } else {
      content = ;
    }
    return (
      

        {content}
      
    );
}

如果你喜欢更为紧凑的代码，可以使用 条件 ? 运算符。与 if 不同的是，它工作于 JSX 内部：

function App(){
    return (

          {isLoggedIn ? (
            
          ) : (
            
          )}
        
)
}

当你不需要 else 分支时，你还可以使用 逻辑 && 语法：

function App(){
    let isLoggedIn  = true;
    return (
        

          {isLoggedIn && }
        
    )
}

3.react的列表渲染

React 中的列表渲染推荐使用的是数组的map() 方法; react中列表渲染也需要绑定key值；

对于列表中的每一个元素，你都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。通常 key 来自你的数据，比如数据库中的 ID。如果你在后续插入、删除或重新排序这些项目，React 将依靠你提供的 key 来思考发生了什么。

使用 map() 函数将这个数组转换为 <标签名> 标签构成的html结构:

function App(){
  const products = [
      { title: 'Cabbage', id: 1 },
      { title: 'Garlic', id: 2 },
      { title: 'Apple', id: 3 },
    ];
   const listItems = products.map(product =>
      

        {product.title}
      
    );   
    
    return (
        
{listItems }
    ) 
}

也可以直接在jsx中使用map()方法进行渲染

function App(){   
    const products = [
      { title: 'Cabbage', id: 1 },
      { title: 'Garlic', id: 2 },
      { title: 'Apple', id: 3 },
    ];
    return (
        

        {
            products.map(product =>
              

                {product.title}
              
            );   
         }
         
    ) 
}