react脚手架搭建

1.开发版搭建

1.npm install -g create-react-app
2.create-react-app 项目名
3.cd 项目名
4.npm start

搭建好后 生成线上版

1.npm run build
2.npm install -g serve
3.serve -s build

生命周期

1.componentWillMount // 在渲染前调用,在客户端也在服务端。
2.componentDidMount // 在第一次渲染后调用，只在客户端
3.componentWillReceiveProps //  在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
4.shouldComponentUpdate // 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
5.componentWillUpdate // 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
6.componentDidUpdate // 在组件完成更新后立即调用。在初始化时不会被调用。
7.componentWillUnmount // 在组件从 DOM 中移除之前立刻被调用。

初始化加载时执行顺序

1.constructor
2.componentWillMount
3.render
4.componentDidMount
5.componentWillReceiveProps
6.shouldComponentUpdate
7.componentWillUpdate
8.render
9.componentDidUpdate
10.componentWillUnmount

shouldComponentUpdate要返回一个booloean 返回值为true时，继续向下执行componentWillUpdate ~ componentDidUpdate这一段 返回为false，则不执行

父组件传递数据给子组件 this.props接收

例如
// 父组件
<child name={this.state.name} onClick={this.getVlue.bind(this)} />
// 子组件 常规写法
let {name} = this.props;
return (
    <div>{name}</div>
)

// 子组件 hook写法
export default (props) => {
    return (
        <div>{props.name}</div>
    )
}

子组件传递给父组件，通过触发父组件传过来的方法来将数据传递过去

例如
// 父页面
<Child resetValue={this.clearData.bind(this)} />

// 子页面 常规写法
let {resetValue} = this.props;
// 接下来在需要调用resetValue(data)的业务场景中将data传值给父组件

// 子页面 hook写法
export default (props) => {
    let {resetValue} = props;
    // 接下来在需要调用resetValue(data)的业务场景中将data传值给父组件
}

双向数据绑定 通过修改this.state中的值来实现

dom更新 通过this.setState修改this.state中数据来触发更新

constructor(props){super(props)} 初始化父组件传过来的内容 可通过this.state = {inputModify: props.inputModify}将数据传到state中