React学习随笔

JSX语法

可以写任意表达式，用花括号包裹；

元素渲染

ReactDOM.render(元素对象/组件，挂载目标对象)
react对于重新创建或加载的元素，只更新改变的部分。

组件

react组件中，‘class’属性要写成'className'
组件可以用函数定义（接收props并返回展示在页面的元素，无状态组件）；或用类来定义，可以使用局部状态、生命周期钩子；
组件名称必须以大写字母开头；
组件返回值只能有一个根元素，组合元素中在最外层用div包裹；
组件不能修改它的props; props应从组件自身的角度命名而不是上下文；

props/state

props是实例对象的属性集合对象；
state是私有的，完全受控于当前组件；只适用于类；
state初始化只能在类的构造函数中；
state更新必须用setState()，传入更新后的state对象；
使用setState()可以使组件进行必要的重新渲染；可以独立地更新state中的变量；也可以接收一个函数，根据之前的状态计算下一个状态；

生命周期(待补充)

componentWillMount
componentWillUnmount
componentDidMount
componentWillReceiveProps
componentWillUpdate

事件处理

事件绑定属性的命名用小驼峰方法；JSX中，如onClick={handler},传入函数；
ES6 class语法不会自动绑定this，推荐使用构造函数中绑定或属性初始化器语法，将this对象绑定；
向事件处理程序传递参数，时间对象event要排在其他参数的最后；
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row
<button onClick={this.deleteRow.bind(this, id)}>Delete Row

条件渲染

传统：if判断语句
jsx: &&短路操作符；可以根据条件判断显示或隐藏；
return (<p>{false && "Please Login"}</p>）p标签中无内容；
三目操作符；可以根据条件转换显示内容；

return (
    <div>
    {isLogin ? (<UserGreeting />) :
         (<GuestGreeting />) }
    </div>
  )

设置render方法返回为null也可以隐藏组件，不影响生命周期函数的回调。

列表，keys

列表的每一项都应该有一个独一无二的key；
key只和兄弟节点之间对比；需唯一；
key需要在数组的上下文中定义，不要在单项组件的内部定义；
key不会在props中传递

function ListItem(props) {
  return <li>{props.value}</li>
}
function NumberList(props) {
  const numbers = props.numbers;
  const list = numbers.map((number) => <ListItem value={number.toString()} />);
  return (
    <ul>{list}</ul>
  )
};

表单

一般使用受控组件；
如果让表单数据由DOM处理，替代方案为使用非受控组件；
, , <select>通过传入一个value属性来实现对组件的控制；<br> 通过设置不同的name，区分目标对象；</p> <pre><code> handleInputChange(e) { const target = e.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]:value }); } </code></pre> <h3 id="状态提升">状态提升</h3> <p>几个组件需要共享的状态，提升到它们最近的父组件中进行管理；<br> 在父组件中定义state和更新state的方法，作为props传入子组件中；子组件发生改变则触发父组件传入的事件处理函数，传入更新值，更新父组件的state；<br> 组合，继承<br> 使用组合而非继承来复用组件之间的代码；<br> props。children将标签内任何内容通过props传入组件；<br> 也可以通过自定义属性传递组件；</p>