react学习笔记

根据官方文档对React进行学习，将一些会遗忘的点进行整理

npx create-react-app my-app

创建名为my-app的项目

class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } } // 用法示例: <ShoppingList name="Mark" />

React.Component的子类组件。 ShoppingList 是一个 React 组件类，或者说是一个 React 组件类型。一个组件接收一些参数，这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。 上述的代码等同于：

return React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */) );

下述两段代码效果一致

/*return ( <button className="square" onClick={function() { alert('click');}}> {this.props.value} </button> );*/ return ( <button className="square" onClick={()=> alert('click')}> {this.props.value} </button> );

官方注释： onClick={() => alert(‘click’)} 的方式向 onClick 这个 prop 传入一个函数。 React 将在单击时调用此函数。但很多人经常忘记编写 () =>，而写成了 onClick={alert(‘click’)}，这种常见的错误会导致每次这个组件渲染的时候都会触发弹出框。

注意 在 JavaScript class 中，每次你定义其子类的构造函数时，都需要调用 super 方法。因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。

使用map方法遍历数组

let listArray = this.state.list.map((item,index)=>{ return ( <li key = {index} > <h3>{index}:{item.title}</h3> <p>{item.content}</p> </li> ) })