react系列之组件(三)

1.什么是组件
React是专注于View层的，组件也是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成。React组件可以看成构造出一个虚拟DOM结构的对象。
2.React创建组件的方式
在React中创建组件有三种方式：
有状态组件(ES6写法)：React.Component
有状态组件(ES5写法)：React.createClass（注：此方法旧版本react可用，现已不可用）
无状态组件的函数写法（函数组件）。
3.有状态？无状态？
无状态组件，它是一种只负责展示的纯组件。这种组件只负责根据传入的props来展示，不涉及到要state状态、生命周期等操作。
有状态组件，需要涉及state、生命周期等操作。
React鼓励在大型项目中尽可能以无状态组件的写法 来分割原本庞大的组件。
2.React创建组件的方式
在React中创建组件有三种方式：
有状态组件(ES6写法)：React.Component
有状态组件(ES5写法)：React.createClass（注：此方法旧版本react可用，现已不可用）
无状态组件的函数写法（函数组件）。
3.有状态？无状态？
无状态组件，它是一种只负责展示的纯组件。这种组件只负责根据传入的props来展示，不涉及到要state状态、生命周期等操作。
有状态组件，需要涉及state、生命周期等操作。
React鼓励在大型项目中尽可能以无状态组件的写法 来分割原本庞大的组件。
组件的构想
（一）构想1：函数组件
把一堆标签用函数包起来，然后 return 出去，这个函数名就代表了这一堆标签。
定义一个函数

function App() {
  return 
hi
;
}
ReactDOM.render(, document.getElementById("root"));

注意： 等价于 等价于 React.createElement(App)。表示的就是函数App里返回的内容。
那么，给函数传参该怎么做？
（二）构想2

标签就是函数，函数就是对象，标签的属性就是函数的参数。
传参示例
// 使用{props.name}获取传过来的参数
function Box1(props) {
  return 
{props.name}
;
}
function App() {
  return (
    

      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

但在 React 世界里，函数无法做到修改别人传的参数。
希望既能满足函数的功能，又能局部 render。
于是 class 组件诞生了。
（三）构想三：class 组件
最简单的例子：

class App extends React.Component {
  render() {
    return (
      

        app {this.props.name} {this.props.age}
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

组件如何拥有自己的局部变量？
规定：在 class App 里使用 constructor

constructor(props) {
    super();
    //局部变量初始化
    this.state = {
      name: props.name
    };
  }
如何修改参数 / 局部变量？
依然是在 class App 里
class App extends React.Component {
  constructor(props) {
    super();
    //局部变量初始化
    this.state = {
      number: 0,
      name: props.name,
      age: props.age
    };
  }
//对参数或局部变量的修改只能用 setState
  setName() {
    this.setState({
      name: "rose"
    });
  }
  render() {
    return (
      

        app {this.state.name} {this.state.age}
        点我修改名字
      
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

新手注意事项：
onClick 后的函数名不能加上 ()
加上()的话，就是将函数的返回值结果传给onClick ，但onClick 要的是函数。
组件名首字母必须大写
关于 this
React 调用onClick 时，是：onClick.call(undefined, 其他函数)
即 React 强制把 this 变为 undefined
该怎么办？
① bind
onClick={this.setName.bind(this)}
② 箭头函数 () => { }
onClick={()=> this.setName()}
对参数或局部变量的修改只能用 setState
不能直接修改，如 this.state.number += 1 (不能这样用)
如果感觉有帮助留下一个宝贵的赞或者给小编一个赞赏！！
同时如果想了解更多内容可以关注下方公众号：

qrcode_for_gh_4effe528d112_258.jpg