React 小白入门随录 01

1、基本使用

    1、获取DOM节点 document.getElementById()
    2、创建根节点 ReactDOM.createRoot
    3、将Recat DOM 节点插入到页面中 root.render()

JSX 语法

• {} 花括号内部可以写表达式
• 内联样式(属性名称驼峰) 标签中引用时 {样式名}
• {} 内写注释
• {} 中插入数组会展开里面的每一项

React 组件

可以使用函数function或者ES6 class 来定义组件

function MyElement(props) {
    return <h1>{props.name}</h1>
}

class MyElement extends React.Component {
    render() {
        return <h1>{this.props.name}</h1>
    }
}

React 状态

• 通过 setState 方法更新状态
• 自顶向下单向数据流 (状态由某些特定组件拥有并且只影响树中下方的组件)

React Props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。

• 默认 Props, 通过 defaultProps 属性设置
• Props 验证 (校验数据是否有效, prop-types)

React 事件处理

• 事件绑定属性采用驼峰命名法
• 阻断默认行为不能通过返回 false 的方式, 需明确使用 preventDefault
• this.handleClick = this.handleClick.bind(this) 为回调函数绑定 this
• 传递参数 (箭头函数 / bind)

条件渲染

列表 & Keys

React 组件 API

• 设置状态 setState 状态会和当前的状态做合并处理
• 替换状态 replaceState 将当前状态替换为新的状态
• 设置属性 setProps
• 替换属性 replaceProps
• 强制更新 forceUpdate
• 获取DOM节点 findDOMNode
• 判断组件是否挂载到DOM中 isMounted

组件生命周期

• 组件的状态：挂载、更新、卸载
• 挂载 componentDidMount
• 卸载 componentWillUnmount
• componentWillUpdate 更新前调用
• componentDidUpdate 更新后立即调用
• shouldComponentUpdate 当props或者state发生变化，渲染执行前调用

React Ajax