跟着官方的
demo
走,最终还是放弃了
React
初始化(node + npm)
npx create-react-app Name
组件化
小写字母开头的组件会被视为原生
DOM
标签,组件名称必须以大写
字母开头,绑定传入的参数视为props
的属性。
- 建议使用类定义:
class Name extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
生命周期
-
挂载卸载
-
constructor()
完成数据的初始化,接受两个参数:
props
和context
, 用super()
传入 -
componentWillMount
初始化,渲染前
-
componentDidMount
渲染后
-
componentWillUnmount
删除前
-
-
更新
-
componentWillReceiveProps (nextProps)
接收到
prop
更新后(初始化时不会调用) -
shouldComponentUpdate(nextProps,nextState)
接收到
props
或state
时(初始化或用forceUpdate
不会调用) -
componentWillUpdate (nextProps,nextState)
接收到新的
props
或state
,渲染前 -
componentDidUpdate(prevProps,prevState)
完成更新后调用(初始化时不会调用)
-
render()
渲染后
-
事件处理
handleClick = (e, props) => {}
<Component onClick={e => this.handleClick(e, props)}><Component>
进阶
-
React.lazy
说明:
const Component = React.lazy(() => import('./Component'));
-
路由
说明: 待补充
-
Context
有自己的作用域
const {Provider, Consumer} = React.createContext(defaultValue); <Provider value={/*共享的数据*/}> /*里面可以渲染对应的内容*/ </Provider> <Consumer> {value => /*根据上下文 进行渲染相应内容*/} </Consumer>
-
错误边界
…我不想努力了