React 的组件可以定义为 函数（React.FC<>）或class（继承 React.Component） 的形式。

一、React.FC<>
1.React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent：
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

2.React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。
3.React.FC提供了类型检查和自动完成的静态属性：displayName，propTypes和defaultProps（注意：defaultProps与React.FC结合使用会存在一些问题）。
4.我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。
例子（这里使用阿里的Ant Desgin Pro框架来演示）：
const SampleModel: React.FC<{}> = () =>{   //React.FC<>为typescript使用的泛型
  	const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
  	return{
  	{/** 触发模态框**/}
  	<Button style={{fontSize:'25px'}}  onClick={()=>handleModalVisible(true)} >样例</Button>
  	{/** 模态框组件**/}
  	<Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }

二、class xx extends React.Component
如需定义 class 组件，需要继承 React.Component。React.Component是类组件，在TypeScript中，React.Component是通用类型（aka React.Component<PropType, StateType>），因此要为其提供（可选）prop和state类型参数：
例子（这里使用阿里的Ant Desgin Pro框架来演示）：：
class SampleModel extends React.Component {
  state = {
    createModalVisible:false,
  };

  handleModalVisible =(cVisible:boolean)=>{
    this.setState({createModalVisible:cVisible});
  };
  return {
  {/** 触发模态框**/}
  	<Button onClick={()=>this.handleModalVisible(true)} >样例</Button>
  	{/** 模态框组件**/}
  	<Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
  }

ps：简单来说，不知道用什么组件类型时，就用 React.FC。

最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目

实现的是加载一张 2:1 的720全景

分享一下我的创建过程

一、搭建框架并安装需要的插件
npx create-react-app parano	// 创建一个 React 项目
npm install -S typescript	// 安装 typescript，这个是类型辅助插件，与全景项目关系不大
npm install -S @types/three	// 安装 typescript 支持的 three.js 插件

二、创建 Pano 组件
Pano 组件用来加载720全景图
import React from 'react'
import * as THREE from 'three'	// 引入 Three.js 插件
import banner from './img/playground.jpg'	// 引入全景图

// props 类型声明接口
interface MyProps {

}


// state 类型声明接口
interface MyState {

}

class Pano extends React.Component<MyProps, MyState> {

    renderer: any = new THREE.WebGLRenderer()	// 创建一个渲染器
    scene: any = new THREE.Scene()	// 创建一个场景
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)	// 创建一个摄像机
    geometry = new THREE.SphereBufferGeometry(100, 60, 40)	// 创建一个球形的容器，用于贴全景图上去
    material: any	// 贴图材质
    mesh: any

    constructor(props: any) {
        super (props)
        this.state = {}
    }

    componentDidMount () {

        this.geometry.scale(-1, 1, 1)

        let texture = new THREE.TextureLoader().load(banner)
        this.material = new THREE.MeshBasicMaterial({map: texture})
        this.mesh = new THREE.Mesh(this.geometry, this.material)

        this.renderer.setSize(window.innerWidth, window.innerHeight)

        document.body.appendChild(this.renderer.domElement)

        this.scene.add(this.mesh)

        this.camera.position.z = 0

        window.addEventListener('resize', this.onWindowResize, false)

        this.animate()
    }

	// 实现窗口大小改变的时候改变全景图的显示大小
    onWindowResize = () => {
        this.camera.aspect = window.innerWidth / window.innerHeight
        this.camera.updateProjectionMatrix()

        this.renderer.setSize(window.innerWidth, window.innerHeight)
    }

	// 逐帧渲染
    animate = () => {
        requestAnimationFrame(this.animate)
        this.mesh.rotation.y += 0.001
        this.renderer.render(this.scene, this.camera)
    }

    render () {
        return (
            <div></div>
        )
    }
}

export default Pano

三、将 Pano 组件添加到 App 组件中
import React from 'react';
import './App.css';
import Pano from './pano';

function App() {
  return (
    <div className="App">
      <Pano />
    </div>
  );
}

export default App;


此时在项目目录中执行  npm run start 即可看到效果

我也是个摄影爱好者，之前自己拍摄过学校的720全景项目，现在想学习一下搭建一个720全景展示的网页，以后就美滋滋啦~

后续还会继续深入学习贴热点图等技术，加油啦！

自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互。
github地址：基于React+antd实现后台模板

预览地址：预览地址
项目重构地址：react+koa实现登陆、聊天、留言板功能后台

重构预览地址：重构预览地址
登录的背景图比较大，所以做了一个loading效果，等图载入完毕后再显示登录页面，首次载入可能比较慢



技术栈

react
antd
react-router
mobx
canvas
ES6
cookie

自己参考了其他优秀的插件，比如动态打字效果、背景粒子效果、shuffle（洗牌），全屏插件等，自己对有些插件封装成类使用
所有路由都需要登录才可进入，自己封装了PrivateRoute组件来实现路由认证，登录信息保存在cookie中，原本是保存在store中，但是刷新页面后登录状态丢失，所以就保存在cookie中

登录背景图太大，使用了TinyPNG进行压缩，并编写了一个loading效果



项目目录结构


assets----存储静态图片资源和共用icon图标

components----存储共用组件

routes----业务页面入口和常用模板

store----状态管理

utils----工具函数



项目截图










问题
整个demo不复杂，主要是熟悉react和路由等，在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下，所以打包的路径要改为相对路径，不能使用绝对路径，我在package.json中添加了homepage:’.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性，结果还是出现js路径错误，我一直以为是webpack打包的问题，找了很久才发现是因为BrowserRouter，将BrowserRouter改为HashRouter就访问正确。

使用react-router（v4）时，如果有服务器端的动态支持，建议使用 BrowserRouter，否则建议使用 HashRouter。

关于BrowserRouter和HashRouter的区别，可以参考：关于 reactrouter 4.0版本中 BrowserRouter和HashRouter的问题、react-router v4中 HashRouter 和 BrowserRouter的使用



最后
demo是我断断续续写的，只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd，整个demo中参考了一些其他人的想法，如动画效果等。另外基于vue的个人项目可以看这个仿制移动端QQ音乐



其他个人项目

基于vue+vue-router+jsonp+vuex仿制的移动端QQ音乐
基于React-Antd的后台模板Demo
基于原生小程序精仿的猫眼电影小程序




觉得不错的给个star鼓励支持！^_^

最近我在学习 React.js 框架，在此记录一下我使用 react-router-dom 来实现单页应用（SPA）的路由跳转时，怎么处理父子组件间的通信。本文使用的是 HashRouter。

父组件中的路由配置
/** 
 * 我使用了 react-router-dom 里面的 Switch 进行页面内的路由更新
 * NavPage 是父组件
 * Content 是子组件
 */

class NavPage extends React.Component {
	render () {
		return (
			<div className='body'>
				<Switch>
	  				<Route path='/navpage/content' component={Content} />
				</Switch>
			</div>
		)
	}
}


/**
 * 在父组件中定义一个方法，实现父组件跳转到子组件并传参数过去
 * 注意： 第一次用 push 方法，后面用 replace 方法
 * func 里面放置的是让子组件调用的时候可以回调告诉父组件的方法
 */

navigateToSon () {
	this.props.history.replace({pathname: '/navpage/content', data: {这里以对象的方式放置要传递的参数}, func: this.sonCallMe})
}

sonCallMe (args) {
	console.log("My Son Call Me Now: ", args)	// 这里接收子组件传递过来的args，输出："My Son Call Me Now: 我是你儿子"
}


子组件中的配置
class Content extends React.Components {

  // 获取父组件 NavPage 初始化传过来的数据
  componentWillMount () {
    console.log(this.props.history.location.data)
  }
  componentWillReceiveProps () {
    console.log(this.props.history.location.data)
  }

  // 触发父组件传递过来的函数去与父组件通信
  callFather () {
      this.props.history.location.func("我是你儿子")
  } 

  render () {
		return (
			<div className='body'>
				<div onClick={this.callFather.bind(this)}></div>
			</div>
		)
	}

}



我是刚踏进 React.js 大门的小白，一路上踩了很多坑。希望可以帮助到跟我一样的小白们，有 React 方面的问题可以留言或者私信我们一起交流~