1.创建组件的方法 函数组件 class组件
1.1 函数组
无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类，通过函数形式或者 `ES6` 箭头 `function`的形式在创建，并且该组件是无state状态的。具体的创建形式如下
1 import React from ‘react ‘;
2
3 //定义一个React组件
4 function App() {
5 return (
6 <div>
7 hello React...
8 </div>
9 );
10 }
11
12 export default App;
1.1 class组件
`React.Component` 是以 `ES6` 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 `React.Component` 形式如下
1 import React from ‘react‘;
2
3 //定义一个React组件
4 class App extends React.Component{
5 render(){
6 return (
7 <div>
8 Hello，Reactjs！！
9 </div>
10 );
11 }
12 }
13
14 export default App;
1 在其他文件中引用组件 2 3 4 import React from ‘react‘; 5 import ReactDOM from ‘react-dom‘; 6 //App组件，组件要求大写字母开头 7 import App from ‘./App‘; 8 9 ReactDOM.render(<App />, document.getElementById(‘root‘));
2.组件的props属性
2.1 概念 :react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。
2.2 `props`属性的特点
1.每个组件对象都会有props（properties的简写）属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值：this.props.propertyName
4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）
5.对props中的属性值进行类型限制和必要性限制
2.3 代码示例
使用函数组件：
1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3
4 //使用函数组件
5 function User(props){
6 //在组件中获取props属性值
7 return <div>{props.name}，{props.age}</div>
8 }
9
10 //定义数据
11 const person ={
12 name:‘张三‘,
13 age:20,
14 sex:‘男‘
15 }
16
17 ReactDOM.render(
18 <User {...person}></User>
19 , document.getElementById(‘root‘));
使用类组件：
1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3
4 //使用class组件
5 class User extends React.Component{
6 render(){
7 return (
8 <div>{this.props.name}--{this.props.age}</div>
9 );
10 }
11 }
12
13 //数据
14 const person ={
15 name:‘张三‘,
16 age:20,
17 sex:‘男‘
18 }
19
20 ReactDOM.render(
21 <User {...person}></User>
22 , document.getElementById(‘root‘));
3.state属性的用法和特点
3.1
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
3.2代码示例：
1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3
4 class Person extends React.Component{
5 //构造方法
6 constructor(){
7 super();
8 this.state = {
9 name: ‘tom‘
10 }
11 }
12
13 render(){
14 //state属性是可修改的
15 this.state.name = ‘jack‘;
16 return (
17 <h1>{this.state.name}</h1>
18 );
19 }
20 }
21
22 ReactDOM.render(<Person />, document.getElementById(‘root‘));
4.父子组件传值
4.1父组件传值子组件
在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到 这个param的值。
父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。
代码如下- 父组件代码片段：
1 constructor(props){
2 super(props)
3 this.state={
4 message:"i am from parent"
5 }
6 }
7 render(){
8 return(
9 <Child txt={this.state.message}/>
10 )
11 }
12 }
子组件代码片段：
1 render(){
2 return(
3 <p>{this.props.txt}</p>
4 )
5 }
完整示例：创建父组件index.js
1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3 import User from ‘./User‘;//引入子组件
4
5 //定义数据
6 const person = {
7 name: ‘Tom‘,
8 age:20
9 }
10
11 ReactDOM.render(
12 //渲染子组件，并向子组件传递name,age属性
13 <User name={person.name} age={person.age}></User>
14 , document.getElementById(‘root‘));
创建子组件 :User.js
1 import React from ‘react‘;
2
3 class User extends React.Component{
4 render(){
5 return (
6 // 使用props属性接收父组件传递过来的参数
7 <div>{this.props.name}，{this.props.age}</div>
8 );
9 }
10 }
11
12 export default User;
5.兄弟组件传值
兄弟组件之间的传值，是通过父组件做的中转 ，流程为：
**组件A** -- `传值` --> **父组件** -- `传值` --> **组件B**
代码示例：创建Aclis.js 组件,用于提供数据
1 import React from ‘react‘;
2
3 class Acls extends React.Component {
4 //按钮点击事件，向父组件Pcls.js传值
5 handleClick(){
6 this.props.data("hello...React...");
7 }
8
9 render(){
10 return (
11 <button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
12 );
13 }
14 }
15
16 export default Acls;
创建父组件 `Pcls.js` 用于中转数据
1 import React from ‘react‘;
2 import Acls from ‘./Acls‘;
3 import Bcls from ‘./Bcls‘;
4
5 class Pcls extends React.Component {
6 //构造函数
7 constructor(){
8 super();
9 this.state = {
10 mess: ‘‘
11 }
12 }
13 //向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值
14 getDatas(data){
15 this.setState({
16 mess: data
17 });
18 }
19
20 render(){
21 return (
22 <React.Fragment>
23 Pcls组件中显示按钮并传值：
24 <Acls data={this.getDatas.bind(this)}></Acls>
25 <Bcls mess={this.state.mess}></Bcls>
26 </React.Fragment>
27 );
28 }
29 }
30
31 export default Pcls;
创建子组件 `Bcls.js` 用于展示从 `Acls.js` 组件中生成的数据
1 import React from ‘react‘;
2
3 class Bcls extends React.Component {
4
5 render(){
6 return (
7 <div>在Bcls组件中展示数据：{this.props.mess}</div>
8 );
9 }
10 }
11
12 export default Bcls;
原文地址：https://www.cnblogs.com/jiazhaolong/p/12075482.html