react基础

JSX

在react中使用jsx来描述用户界面
jsx中的表达式 {}
在语句中使用jsx
属性 “”
属性表达式 {}
防xss攻击

元素渲染

元素，react应用的最小单位
ReactDOM.render() 更新元素：只更新改变的部分

组件和props

组件定义

// es6 class 定义 react 组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// 或 函数定义 react 组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

组件渲染

1 2	// 组件渲染 const element = <Welcome name="Sara" />; // 组件名称首字母大写

注意：
- 组件名称首字母大写
- 组件的返回值只能有一个根元素

state 和生命周期

组件更新 -> 添加状态
函数转变为类 -> 添加局部状态、生命周期钩子
属性转变为局部状态：
- this.props.date -> this.state.date
- 类构造函数 this.state
- 传递props到基础构造函数
生命周期方法添加到类：
- 组件第一次加载到dom，挂载 componentDidMount
- 组件生成的dom被移除，卸载 componentWillUnmount
状态更新，位于事件处理器中的setState是异步的
redux 状态管理

1
2
3

this.setState((preState, props) => {
    counter: this.state.counter + props.increment // 属性中的增量
})

在事件循环中，状态更新合并

事件处理

添加监听器

1	onClick = {handleClick}

preventDefault 阻止默认行为
react事件绑定this
- 构造函数中绑定this（官方推荐，只会生成一次实例）
- 使用属性初始化器语法
- 在调用时使用箭头函数绑定this

// 构造函数中绑定this
consructor(props) {
    super(props);
    this.state = {isToggleOn: true}
    this.handleClick = this.handleClick.bind(this)
}
handleClick () {
    console.log('this', this)
}
<button onClick={this.handleClick}>
  Click me
</button>

// 属性初始化器语法，es6
handleClick = () => {
    console.log(this);
  }

// 在添加监听器的 回调函数中 使用箭头函数（如果回调函数作为一个属性值传入低阶组件，组件可能会进行额外的重新渲染，建议用1、2）
handleClick () {
    console.log(this)
}
render () {
    return (
        <button onClick={(e) => this.handleClick(e)}>
            click
        <button>
    )
}

react事件传参，会造成额外渲染

1
2
3

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<!--deleteRow(id, e) 事件对象e放后面-->
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

条件渲染

if
&&
? :
return null 阻止组件渲染

列表

数组转化为数列元素

function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number, index) =>
            <li key={index}>{number}</li>
      );
      return (
            <ul>{listItems}</ul>
      );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
      <NumberList numbers={numbers} />,
      document.getElementById('root')
);

表单

受控组件
input、select、textarea
checkBox

this.state = {value: ''};
handleChange(event) => {
  this.setState({value: event.target.value.toUpperCase()});
}
// 渲染表单
<input type="text" value={this.state.value} onChange={this.handleChange} />
<textarea value={this.state.value} onChange={this.handleChange} />

<select value={this.state.value} onChange={this.handleChange}>
   <option value="grapefruit">Grapefruit</option>
   <option value="lime">Lime</option>
   <option value="coconut">Coconut</option>
   <option value="mango">Mango</option>
</select>

状态提升

状态分享，将state数据提升至离他们最近的父组件中进行管理
私有state，handleChange -> 转化为父组件props

api

JSX

元素渲染

组件和props

state 和 生命周期

事件处理

条件渲染

列表

表单

状态提升

state 和生命周期