那些年忘掉的React

在长期使用Vue开发项目的我,渐渐忘记如何使用React!!
React 是一个 Facebook 和 Instagram 用来创建用户界面（UI）的 JavaScript 库。很人多认为 React 是 MVC 中的V（图）。
1.React项目的搭建!
使用yeoman脚手架搭建

npm install -g yeoman
npm install -g genreator-react-webpack
新建一个文件夹
yo react-webpack
启动项目 npm start

项目到处搭建完成!
React的使用

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。
2.PropsType

React组件创建的时候，需要传入属性，我们可以使用使用PropTypes进行类型检查，您可以使用React.PropTypes在组件的道具上运行。

React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string
React.PropTypes.symbol
React.PropTypes.node
React.PropTypes.element
React.PropTypes.instanceOf()
React.PropTypes.oneOf()
React.PropTypes.oneOfType()
React.PropTypes.arrayOf()
React.PropTypes.objectOf()
React.PropTypes.shape()
React.PropTypes.any

默认情况下，验证器将props视为可选属性。您可以使用isRequired确保在未提供道具时显示警告。

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本类型。默认
    // 情况下，这些 prop 都是可传可不传的。
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 所有可以被渲染的对象：数字，
    // 字符串，DOM 元素或包含这些类型的数组。
    optionalNode: React.PropTypes.node,

    // React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 指定的多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定形状参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 以后任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

或者（ES6）

    MyComponent.propTypes = {
        name:React.PropTypes.string
};

静态方法（属性）属于类级别的特征，所有实例都自动获取类级别的静态特征。

React生命周期

//用代码说明
class LifeCycle extends React.Component {
    constructor(props) {            //React初始化
        super(props);               //调用父主件(constructor)构造器,就是继承constructor
        this.state = {str: "hello"};//定义初始状态
    }

    componentWillMount() {          //主件即将挂载阶段 
        alert("componentWillMount");
    }

    componentDidMount() {            //主件渲染完成
        alert("componentDidMount");
    }

    componentWillReceiveProps(nextProps) {    //props发生变化时触发
        alert("componentWillReceiveProps");
    }

    shouldComponentUpdate() {                //props和state变化后是否重新渲染主件
        alert("shouldComponentUpdate");
        return true;        // 记得要返回true
    }

    componentWillUpdate() {                   //主件即将更新
        alert("componentWillUpdate");
    }
    
    componentDidUpdate() {                    //主件更新完成
        alert("componentDidUpdate");
    }

    componentWillUnmount() {                  //主件销毁阶段
        alert("componentWillUnmount");
    }

    setTheState() {
        let s = "hello";
        if (this.state.str === s) {
            s = "HELLO";
        }
        this.setState({
            str: s
        });
    }

    forceItUpdate() {
        this.forceUpdate();
    }

    render() {                    //主件渲染阶段
        alert("render");
        return(
            <div>
                <span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
                <br />
                <span>{"State:"}<h2>{this.state.str}</h2></span>
            </div>
        );
    }
}

class Container  extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: Math.random() * 100
        };
    }

    propsChange() {
        this.setState({
            num: Math.random() * 100
        });
    }

    setLifeCycleState() {
        this.refs.rLifeCycle.setTheState();
    }

    forceLifeCycleUpdate() {
        this.refs.rLifeCycle.forceItUpdate();
    }

    unmountLifeCycle() {
        // 这里卸载父组件也会导致卸载子组件
        React.unmountComponentAtNode(document.getElementById("container"));
    }

    parentForceUpdate() {
        this.forceUpdate();
    }

    render() {
        return (
            <div>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.propsChange.bind(this)}>propsChange</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.setLifeCycleState.bind(this)}>setState</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
                <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
                <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
            </div>
        );
    }
}

ReactDom.render(
    <Container></Container>,
    document.getElementById('container')
);

那些年忘掉的React

评论 (0)