React16教程之组件创建和传值
本人也在学习react16，如有不正确的地方还请评论指出，我会尽快修改。万分感谢。
组件
创建组件
组件有三种，一种有状态组件，一种无状态组件，还有一种有状态组件，有状态组件后面进行说明
有状态组件
有状态组件顾名思义他是有自己的状态和生命周期的，并且有状态组件的定位主要是处理一些逻辑性的交互操作和数据处理的操作，更偏向于逻辑处理交互。
可以通过 Class 进行创建，不过要将创建的类继承Component
Such As：
// 引入react
import React from 'react';
// 引入组件css样式
import './index.css';
// 通过类进行创建组件对象
// 但是需要将创建的类对React.Component进行继承
// 并将创建好的组件抛出出去
export default class home extends React.Component {
constructor(){
// 父组件传过来的参数
super(props)
// 组件中存储数据的地方
this.state = {
value: "wzy"
}
}
handleChange(e){
this.setState({
value : e.target.value
})
}
// 在render中使用jsx进行组件结构的返回
render(){
return(
// 绑定数据需要使用单花括号进行绑定
{this.state.value}
)
}
}
无状态组件
无状态组件恰好与有状态组件相反，无状态组件只接受props 参数并不会进行逻辑操作，主要是一个模板的作用，将props 里面的数据进行一个展示的作用。无状态组件应该保持模板的纯粹性，以便于组件复用。
Such As：
var Header = (props) = (
{props.xxx}
);
引用组件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Home from './home';
import * as serviceWorker from './serviceWorker';
// 通过import将创建好的组件进行引入，直接在此写上jsx进行使用
ReactDOM.render(
,
document.getElementById('root')
);
serviceWorker.unregister();
组合组件
组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。
import React from 'react';
import { render } from 'react-dom';
const Bom1 = (props) =>{
return({props.name}
)
}
const Box = ()=>{
return(
Props 具有只读性
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
function sum(a, b) {
return a + b;
}
这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。
function sum2(account,num){
account.total -= num;
}
这样的函数就不是纯函数了。因为它改变了自己的参数。
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
需特别注意，this.props.children 是一个特殊的 prop，通常由 JSX 表达式中的子组件组成，而非组件本身定义。
组件传值
父子组件传值
// 父组件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Home from './home';
import * as serviceWorker from './serviceWorker';
// 通过import将创建好的组件进行引入，直接在此写上jsx进行使用
ReactDOM.render(
,
document.getElementById('root')
);
serviceWorker.unregister();
// 子组件
import React from 'react';
import './index.css';
export default class home extends React.Component {
// 父组件传输过来的值存储在props中
constructor(props){
super()
this.state = {
value: "wzy"
}
}
handleChange(e){
this.setState({
value : e.target.value
})
}
render(){
return(
{this.props.name}
)
}
}
传值校验
// 引入校验模块
import PropTypes from 'prop-types';
MyComponent.propTypes = {
// 你可以将属性声明为 JS 原生类型，默认情况下
// 这些属性都是可选的。
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 任何可被渲染的元素（包括数字、字符串、元素或数组）
// (或 Fragment) 也包含这些类型。
optionalNode: PropTypes.node,
// 一个 React 元素。
optionalElement: PropTypes.element,
// 一个 React 元素类型（即，MyComponent）。
optionalElementType: PropTypes.elementType,
// 你也可以声明 prop 为类的实例，这里使用
// JS 的 instanceof 操作符。
optionalMessage: PropTypes.instanceOf(Message),
// 你可以让你的 prop 只能是特定的值，指定它为
// 枚举类型。
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 一个对象可以是几种类型中的任意一个类型
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 可以指定一个数组由某一类型的元素组成
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 可以指定一个对象由某一类型的值组成
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 可以指定一个对象由特定的类型值组成
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// An object with warnings on extra properties
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),
// 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保
// 这个 prop 没有被提供时，会打印警告信息。
requiredFunc: PropTypes.func.isRequired,
// 任意类型的数据
requiredAny: PropTypes.any.isRequired,
// 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
// 请不要使用 `console.warn` 或抛出异常，因为这在 `onOfType` 中不会起作用。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
// 它应该在验证失败时返回一个 Error 对象。
// 验证器将验证数组或对象中的每个值。验证器的前两个参数
// 第一个是数组或对象本身
// 第二个是他们当前的键。
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
子组件向父组件传值
// 父组件
import React from 'react';
import Child from "../child"
export default class Parent extends React.Component{
constructor(props){
super(props);
}
render(){
return(
父组件通过传入一个自定义字段将这个自定义函数传入并且bind this来获取子组件的数据，自定义函数的默认值是子组件传过来的数据
// 子组件
import React from 'react';
export default class child extends React.Component{
constructor(props){
super(props)
this.state={
sendParent:"11111"
}
this.props.cb(this.state.sendParent)
}
render() {
return (
{this.state.sendParent}
)
};
}
子组件通过调用父组件传过来的自定义函数，将要发送的数据传入参数中
兄弟组件传值
其实跟vue还是很像的，vue中兄弟组件传值是通过一个bus函数进行传递。而react 则是将这个数据给换成了父组件，子组件将数据传输给父组件后，父组件再将这个数据传输给另一个子组件
context传值
这个暂时就不写了，还没看明白。。。。回头补上
更多后续文章请关注本博客React专栏，感谢！感谢！感谢！