react第4天

props

子组件 需要传入两个参数
person size
父组件使用到子组件
在组件使用中传入 person size

包中包

utils.js 根据传入的参数 获取当前地址

export function getImageUrl(person, size="s"){
    return (
        'http://dede/'+ person.imageId
        +size+        
        +'.jpg'
    )
}

app.js

import {getImageUrl } from './utils.js'

function Avatar({person, size}){
 return (
    <img 
     className="avatar"
     src={ getImageUrl(person) }
     alt={person.name}
     width={size}
     height={size}
    />
 )
}

export default function Profile(){
    return (
        <div>
            <Avatar
             size={100}
             person =  {{
                name: 'Saruhuashi',
                imageId: 'YfeOqp2'
             }} />

            <Avatar
                size={80}
                person={{
                name: 'Aklilu Lemma', 
                imageId: 'OKS67lh'
                }}
            />

        </div>
    )
}

由一个值通过传入函数  判断当前显示的是否是哪个 

function Item({name, isPacked}){
 if(isPacked){
 return <li className ="item">{name} LL</li>
 }
 return <li className="item">{name}</li>
}

export default function PackingList(){
    return (
        <section>
          <h1>djeidje</h1>
        <ul>
           <Item  
           isPacked = {true}
           name="dedede"
           />
         <Item  
           isPacked = {false}
           name="kkkk"
           />

        </ul>
        </section>
    )
}

当某个条件成立 不想render 任何东西时 可以return null

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

也可以通过判断isPacked 用 ？ render 显示的文本

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

也可以通过再判断逻辑中加入 dom标签

function Item({name, isPacked}){
    // 内部做逻辑判断 显示不同的dom
    return (
        <li className="item">
           {isPacked ? (
            <del>
                {name + '✔'}
            </del>
           ): (
            name
           )}

        </li>
    )
}


export default function PackingList(){
    return (
        <section>
            <h1>Packing list</h1>
            <ul>
                <Item
                isPacked = {true}
                name ="Space suiy"
                >
                </Item>

                <Item
                isPacked = {false}
                name ="Space ujhuhu"
                >
                </Item>
            </ul>
        </section>
    )
}

render arr list

import Gallery from './Gallery.js'

import { people } from './data.js';
import { getImageUrl } from './utils.js';
export  default function List(){
    const listItems = people.map(person=>
        // 要加入key值 要不然会报错
        <li key= {person.id}>
           <img 
           src={getImageUrl(person)}
           alt={person.name}
           >
            <p>
                <b>{person.name}</b>
            </p>

           </img>
        </li>
    )
    return <ul>{listItems}</ul>
}

为什么一定要加人key
并且key的值最好不要是index
因为在遍历对象的每个属性进行深度对比，非常耗性能
react使用key进行对比，如果不指定则默认为index 下标
index下标不好的原因是
只会从上到下依次对比树的不同
并没有去找当前项是否是存在项
而只是对比排序中的第一个 第二个

<div key="1">bob</div> | <div key="1">new-guy</div> 
<div key="2">sue</div> | <div key="2">bob</div> 
                                         | <div key="3">sue</div>

不能识别，并且会非常耗费性能去做这件事
所以找到一个唯一的key很重要
推荐id或者name能够代表唯一的值
这样就只需要做一个unshift操作，节省性能