React.js 入门学习记录

1. 定义组件

返回目录

1. 定义组件有两种方式：函数组件 和 类组件。
2. 定义函数组件

   //引入 React
   import React from "react";
   //用 function 定义组件
   function App() {
     return <h1>Hello, Fun Component</h1>;
   }
   //导出组件
   export default App;
   

3. 定义类组件

   //引入 React
   import React from "react";
   //用 class 定义组件
   class App extends React.Component {
     render() {
       return <h1>Hello, Cls Component</h1>;
     }
   }
   //导出组件
   export default App;
   

4. 组件名必须以大写字母开头。

2. 组件渲染

返回目录

1. 一般在入口文件使用

   //引入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. 组合组件

返回目录

1. 一个组件可以复用多个组件

   //引入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 绑定

返回目录

1. 绑定 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 内部数据

返回目录

1. 类组件的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 组件参数

返回目录

1. 函数组件的 props

   import React from "react";
   	
   function Example (props) {
       return (<div>{props.name}</div>)
   }
   

2. 类组件的 props

   import React from "react";
   	
   class Example extends React.Component {
       constructor(props){
           super(props);
       }
       render(){
       	return (<div>{this.props.name}</div>)
   	}
   }
   

7. props 默认定义

返回目录

1. 类的 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 参数验证

返回目录

1. 类的 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

返回目录

1. 必须顶层标签

   import React from "react";
   
   class Example extends React.Component {
       constructor(props){
           super(props);
       }
       render(){
       	//单行
       	return <div></div>
       	//或者多行，要用()包裹
   		return (<div>
   		    <span></span>
   		</div>);
   	}
   }
   

2. 不想要顶层标签包裹

   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 元素

返回目录

1. 举例

   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 样式

返回目录

1. 添加 css 类名

   let css = "CCS-Example"
   <Component className={css}/>
   //或者
   <Component className="CCS-Example"/>
   

2. 行内样式

   //配置式
   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, ()=>());