react入门笔记 - 技术栈

1.JSX的用法

javascript 复制代码

function App(){

let msg = 'react 的插值';

return (
 <div>{msg}</div> 
)
}

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

javascript 复制代码

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

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

javascript 复制代码

function App(){
    let count = 10;
    return (
        <div>
           <p>{ 1 + 1}</p>
           <h2>{count * 10}</h2>
        </div>
    )
}

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

javascript 复制代码

function App(){
    let count = 10;
    let msg = '新的一年';
    return (
        <div>
           <p>{`${count} hello`}</p>  
           <p>{msg + '美妙人生'}</p>        
        </div>
    )
}

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

javascript 复制代码

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

    return (
        <div>
            {ele}
        </div>
    )
}

2.react的条件渲染

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

javascript 复制代码

function App(){
    let content;
    if (isLoggedIn) {
      content = <AdminPanel />;
    } else {
      content = <LoginForm />;
    }
    return (
      <div>
        {content}
      </div>
    );
}

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

javascript 复制代码

function App(){
    return (<div>
          {isLoggedIn ? (
            <AdminPanel />
          ) : (
            <LoginForm />
          )}
        </div>)
}

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

javascript 复制代码

function App(){
    let isLoggedIn  = true;
    return (
        <div>
          {isLoggedIn && <AdminPanel />}
        </div>
    )
}

3.react的列表渲染

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

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

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

javascript 复制代码

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

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

javascript 复制代码

function App(){   
    const products = [
      { title: 'Cabbage', id: 1 },
      { title: 'Garlic', id: 2 },
      { title: 'Apple', id: 3 },
    ];
    return (
        <ul>
        {
            products.map(product =>
              <li key={product.id}>
                {product.title}
              </li>
            );   
         }
         </ul>
    ) 
}