React React is the best way to React!

Taro taro recently rewrote a small program written using UniAPP and used the React framework to summarize it. This article is convenient for friends who are familiar with Vue to learn React.

The installation

1. Introduce tests directly into HTML files

	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
Copy the code

Type =”text/ Babel “in JSX script

2. React Scaffolding

$ cnpm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start

This example uses the form in the first example

component

React defines components in two ways:

ES6 class definition
class Index extends React.Component{
	constructor(props){
		super(props)
		console.log(this.props);
	}
	render(){
		return(
			<div>Home</div>)}}// Function/stateless /UI component
function Index(props){
	console.log(props);
	return(
		<div>Home</div>)}// The above two components are equivalent in React..class App extends React.Component {
	render() {
		return <Index name="index" message='Hahaha' good-foo="12312" />;
	}
}

ReactDOM.render(
	React.createElement(App),
	document.getElementById('app'));Copy the code

The React props represents the parameters passed to the component

The value of the above example is:

{name:’index’, message:’ hahaha ‘, good-foo:’12312’}

• Dash named attributes will also exist as dash attributes

super()

• With ES6 class defined components, constructor must use super() to perform the parent constructor, preferably passing props in
• Use this in constructor only after using super()

// Don't pass props in super
class Index extends React.Component{
	constructor(props){
		super(a)console.log(props); / / {... }
		console.log(this.props); // undefined
	}
	render(){
		return(
			<div>Home</div>)}}Copy the code

React defaultProps

1. Act as a static property in the React component class

//
class Index extends React.Component{
	constructor(props){
		super(props)

	}
	/ / add
	static defaultProps = { 
		name: 'the index page'
	}
	render(){
		return(
			<div>Home</div>)}}Copy the code

2. Properties as classes or constructors

class Index extends React.Component{
	constructor(props){
		super(props)

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

function Index(props){
	return(
		<div>
			{props.name}
		</div>
	)
}

Index.defaultProps = {    
	name: 'I'm the default for props! '
}

Copy the code

3. Deconstruction of default values for functional components

function Index(props){

	const {
		name: 'I'm the default for props! '
	} = props

	return(
		<div>
			{props.name}
		</div>)}Copy the code

The React of ‘data’ state

1. Define the initial state value

• You can use it directly in the render function by deconstructing the value of state

class Index extends React.Component{
	constructor(props){
		super(props)
		this.state = { / / add
			name:'Joe'.age:18}}render(){
		const {	name,	age	} = this.state / / add
		return(
			<div>
				<div>{this.props.name}</div>
				<ul>
					<li>{name}</li>
					<li>{age}</li>
				</ul>
			</div>
		)
	}
}

Index.defaultProps ={
	message: 'I'm the default for props! '
}

class App extends React.Component {
	render() {
		return <Index name='index' message='Hahaha'  good-foo="12312" />;
	}
}
ReactDOM.render(
	React.createElement(App),
	document.getElementById('app'));Copy the code

2. Change the value of state

setState()

1. Update status

	// Vue changes the age value of data
	// this.age = 20

	// React Changes the age value of state
	this.setState({
		age:20
	})

Copy the code

2. The use of getting old values before updating status

• PrevState indicates the state before changing the age value of the state
• Props represents the props passed in

this.setState((prevState,props) = >{
	console.log(prevState,props);
	return{
		age:20}})Copy the code

3. Usage of the call after updating the status

• Somewhat like vue’s $nextTick(), part of the business code can use this usage

	this.setState({
			age:20
		},() = >{
		// Execute after updating the age value
	})
Copy the code

The React ‘computed’

• Vue

computed:{
	renderFullName() {
    return `The ${this.firstName} The ${this.lastName}`; }}Copy the code

• React

class Example extends Component {
	constructor(props){
		super(props)
		this.state = {
			firstName: ' '.lastName: ' ',}}renderFullName() {
    const { firstName, lastName } = this.state;
    return `${firstName} ${lastName}`;
  }
  render() {
    const renderFullName = this.renderFullName()
    return <div>{renderFullName}</div>; }}Copy the code

• You can also use the React hook implementation

The React ‘watch’

Initialization of the props obj property is performed once

• Vue

props:{
	obj: {type:Object.defaule:() = >{
			name:'Joe'.age:20}}}watch: {obj: {immediate: true.handler:function(val,oldval){
			console.log(val.name)
		}
	}
}
Copy the code

• React

class Content extends React.Component {
	constructor(props){
		super(props)
	}
	static defaultPros = {
		obj: {name:'Joe'.age:20}}componentWillReceiveProps(newProps){
		if(newProps.obj === this.props.obj){
			console.log(this.props.obj.name)
		}
	}
	componentDidMount() {
    console.log(this.props.obj.name)
  }
}

Copy the code

1. By using the function to obtain newProps componentWillReceiveProps hook
2. In this case, we need to compare the old and new props to determine whether the obj is changing for other processing
3. Vue mounted is initialized once by using the componentDidMount hook function

• The React hook implementation is also possible

React defines functions

class Index extends React.Component{
	constructor(props){
		super(props)
		this.state = { / / add
			name:'Joe'.age:18
		}
		this.handleClick1 = this.handleClick1.bind(this)
		this.handleClick2 = this.handleClick2.bind(this)}/ / add
	handleClick1(){
		// this.props
		// this.state
		console.log('handleClick1---')}handleClick2(event,name){
		console.log('handleClick2---',event,name)
	}
	render(){
		const {	name,	age	} = this.state / / add
		return(
			<div>
				<div>{this.props.name}</div>
				<ul>
					<li onClick={this.handleClick1}>{name}</li>
					<li onClick={(event)= >{this.handleClick2(event,name)}}>{age}</li>
				</ul>
			</div>)}}Copy the code

About the function

HandleClick1: You can get this.props and this.state to write some business

HandleClick2: Written as a callback function that passes event objects, along with some other data

HandleClick2 doesn’t have to have a layer of functions, so it’s kind of like when you compile React you put the function body right there, it’s called directly

If you call a function through this by binding it to this, the this pointer will be lost