SOURCE

console 命令行工具 X clear

                    
>
console
const MAX = 50000

const list = []
for(let i = 0; i < MAX; i++) {
    // big count
    list.push({id: i, label: Mock.Random.name()})
}

const List = ({keyword}) => {
    console.log('List is rendering')
    return (
        <ul>
            {list.filter(item => item.label.includes(keyword)).map(item => <li key={item.id}>{item.label}</li>)}
        </ul>
    )
}

const App = () => {
    const [name, setName] = React.useState('')
    return (
        <div>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="keyword" />
            <List keyword={name} />
        </div>
    );
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)
<div id="root"></div>
html, body {
    margin: 0;
    height: 100%;
}

#root {
    height: 100%;
}

本项目引用的自定义外部资源