文章目录
1. 定义组件
- 定义组件有两种方式:函数组件 和 类组件。
- 定义函数组件
//引入 React import React from "react"; //用 function 定义组件 function App() { return <h1>Hello, Fun Component</h1>; } //导出组件 export default App;
- 定义类组件
//引入 React import React from "react"; //用 class 定义组件 class App extends React.Component { render() { return <h1>Hello, Cls Component</h1>; } } //导出组件 export default App;
- 组件名必须以大写字母开头。
2. 组件渲染
- 一般在入口文件使用
//引入react import React from "react"; //定义组件 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } //将 {name: 'Sara'} 作为 props 传入并 Welcome 组件 const element = <Welcome name="Sara" />; //把 element 渲染到 <div id="root"></div> 标签上 ReactDOM.render(element, document.getElementById('root'));
3. 组合组件
- 一个组件可以复用多个组件
//引入react import React from "react"; //定义组件 Welcome function Welcome(props) { return <h1>Hello, {props.name}</h1>; } //定义组件 App function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); } //渲染组件 App ReactDOM.render(<App />, document.getElementById('root'));
警告:组件的返回值只能有一个根元素。要用一个<div>来包裹所有<Welcome />元素。
4. this 绑定
- 绑定 this 有“构造函数bind”、“直接bind”、“箭头函数bind”三种
import React from "react"; function Welcome(props) { constructor(props) { super(props); //构造函数里bind this.handleClick = this.handleClick.bind(this); } return <div> //构造函数里bind <input onClick={this.handleClick} /> //直接bind <input onClick={this.handleClick.bind(this)} /> //箭头函数bind <input onClick={e => this.handleClick()} /> </div>; }
5. state 内部数据
- 类组件的state
import React from "react"; class Example extends React.Component { constructor(props){ super(props); //定义默认state this.state = { name: "John" }; } handleClick(e){ //设置 state 的属性,会刷新渲染 this.setState('name', 'Tim'); this.setState({ name: 'Tim'}); //获取 state 的属性值 console.log(this.state.name); } //... }
6. props 组件参数
- 函数组件的 props
import React from "react"; function Example (props) { return (<div>{props.name}</div>) }
- 类组件的 props
import React from "react"; class Example extends React.Component { constructor(props){ super(props); } render(){ return (<div>{this.props.name}</div>) } }
7. props 默认定义
- 类的 props 默认定义
import React from 'react'; class Example extends React.Component { //默认参数 static defaultProps = { name: 'John' } constructor(props){ super(props); } render(){ return (<div>{this.props.name}</div>) } }
8. props 参数验证
- 类的 props 参数验证
import React from 'react'; import PropTypes from 'prop-types'; //引入 prop-types class Example extends React.Component { //内部参数验证 static propTypes = { name: PropTypes.string.isRequired } } //或外部参数验证,选其一 Example.propTypes = { name: PropTypes.string.isRequired };
9. return
- 必须顶层标签
import React from "react"; class Example extends React.Component { constructor(props){ super(props); } render(){ //单行 return <div></div> //或者多行,要用()包裹 return (<div> <span></span> </div>); } }
- 不想要顶层标签包裹
import React from "react"; class Example extends React.Component { constructor(props){ super(props); } render(){ //1. Fragment return <React.Fragment> <div></div> <div></div> </React.Fragment> //2. React16 支持 数组 return [ <div></div> <div></div> ]; } }
10. ref 获取 DOM 元素
- 举例
import React from "react"; class Example extends React.Component { constructor(props){ super(props); this.handle = this.handle.bind(this); } handle() { //使用 this.refs.example } render(){ return <React.Fragment> //定义 <div ref="example"></div> </React.Fragment> } }
11. 高阶组件 ???
12 Mixins ??? 貌似被遗弃了
13. 添加 css 样式
- 添加 css 类名
let css = "CCS-Example" <Component className={css}/> //或者 <Component className="CCS-Example"/>
- 行内样式
//配置式 let style = { width:"100px" } <Component sytle={style}/> //或者 <Component sytle={{ height: '100px' }}/>
14. 添加图片
//添加网络图片
<img src="http://image.com/1.png" />
//添加本地图片
let img = require('./image.png');
<img src={img} />
//添加背景图片
<Component style={
backgroundImage: "url(" + require("./imgs/bg.jpg") + ")"
} />
15. onClick
16. onChange
17. React.Children.map
//返回数组
React.Children.map(this.props.Children, ()=>());