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}
    • ); }
    ) }

    你可能感兴趣的:(react.js,笔记,javascript)