Introduction to the react

About the react

React was originally created by Facebook engineer Jordan Walke. It was not part of Facebook’s Newsfeed in 2011, and was deployed on Instagram in 2012. It was announced as open source in May 2013 and has been “aged” for nearly a decade. React is being widely used by Tencent, Alibaba and other first-tier companies. React is a javascript library for building user interfaces. Simply put, just focus on the view. We only need to do the data processing. React handles the DOM rendering page for us.

Why learn React

1. Native javascript manipulates DOM frequently and inefficiently

Using javascript to manipulate the DOM directly, the browser does a lot of redrawing and rearranging

Native javascript is not componentized into a scheme, and the code reuse rate is low

Characteristics of the react

Adopt componentized mode and declarative coding to improve development efficiency and component reuse rate

React Native allows you to use the React syntax for mobile development

3 Use the virtual DOM + Diffing algorithm to minimize interaction with the real DOM

jsx

Here is a simple demo of JSX and what to look out for

Class and functional components

As the name implies, a component written in a function is a function component, and a component written in a class is a class component. So when do you need a functional component and when do you need a class component? This brings us to one of the component’s three core properties, state.

state

State is used for initialization. Note the following

1 State must be an object

This in component render is the component instance object

3 component custom method this is undefined how to solve

A forces bind this via the function object’s bind()

B arrow function

4 The setState method is used to modify the status data

eg :

class Mycomponent extends React.Component { state = { isHOT:true } demo = () => { const {isHOT} = this.state this.setState({ isHOT:! Render (){const {isHOT} = this.state return <h1 onClick={this.demo}> Today weather {this.state?' good ':' bad '}</h1>}}  ReactDOM.render(<Mycomponent/>,document.querySelector('#root1'))Copy the code

props

Props is used to pass values to components eg:

class Person extends React.Component { render(){ const{name,age,sex} = this.props return( <ul> <li>{name}</li> < li > {age} < / li > < li > {sex} < / li > < / ul >)}} const persons = {name: 'zz' age: 18, sex: 'difficult'} ReactDOM. Render (< Person {... persons}/>,document.querySelector('#root')) <script> // const persons = {name:'zz',age:18,} // console.log(... persons) Uncaught TypeError: Found non-callable @@iterator </script>Copy the code

It’s important to note here that… React and Babel do not expand objects directly, they must be wrapped with {}. React and Babel do not expand objects directly, they must be wrapped with {}. Of course, we can also restrict the incoming data, such as mandatory, type, default value, etc. eg:

The static propTypes = {name: propTypes. String. IsRequired, / / set the name is type string shall fill the age: } static defaultProps = {sex:' props'} static defaultProps = {sex:' props'}Copy the code

refs

Refs can be written in three ways

Bind the ref directly to the DOM as a string and get the value through this.refs. This method is not recommended. The official explanation is that string refs have some efficiency issues and are outdated and may be removed in future versions.

class Demo extends React.Component { showData = ()=>{ console.log(this.refs.input1.value) } showBlur = ()=>{ Console. log(this.refs.input2.value)} render(){return(<div> <input ref="input1" type="text" placrholder=" click to display data "/> <button onClick={this.showData}> </button> <input ref="input2" onBlur={this. showData} type="text" Placrholder =" out-of-focus display data "/> </div>)}}Copy the code

The ref of the callback type passes the current node as an argument to the this.xx.value value. One thing to note here is that if the ref of the callback type is defined inline, if the component is updated later, it will be executed twice, passing null the first time and the DOM node the second time. This is because a new function instance is created each time it renders, so React clears old refs and sets new ones. You can avoid this problem by defining ref as a class binding function. But the official explanation is that it doesn’t hurt to write inline functions.

3. Call this method through createRef to return a container that can store the nodes identified by ref. This.xx.current. Value can be used to retrieve data. The trouble with this method is that it’s easy to create as many as you need, but it’s officially the most recommended form.

Class components can use props, props, and ref, while function components can only use props(not hooks for now). We can use class components whenever we need to use these properties, and we can use function components for simple components.

The react event

React uses on+ event names to bind events. Note that the event names must be capitalized. There are two reasons why custom (synthesized) events are used instead of native events

For greater compatibility
It’s done through event delegation, for efficiency

The life cycle

Constructor () * 2. ComponentWillMount () deprecated * 3. Render () ** 4. ComponentDidMount () : componentDidMount() : componentDidMount() : componentDidMount(); ShouldComponentUpdate () * 2.ComponentWillUpdate () deprecate * 3.render () * 4.ComponentDidupDate () * * 3 1 Initial stage: triggered by reactdom.render () => First render * 1.constructor () * 2. GetDerivedStateFromProps * 3.render () * * 4.ComponentDidMount () * 2 Update phase: triggered by internal component this.setState() or parent component render * 1. getDerivedStateFromProps * 2. shouldComponentUpdate() * 3. render() * 4. getSnapshotBeforeUpdate * 4. Working process by ReactDOM componentDidUpdate () * 3. UnmountComponentAtNode triggered () * * 1. com ponentWillUnmount () * * /Copy the code

hooks

Hook is a new feature in Act 16.8 that allows functional components to use state and other React features

State the hooks: React. UseState ()

Let the function also have state and read and write. Parameter description: The value specified during the first initialization is cached internally. The return value is an array of two elements, the first being the internal current state value, and the second being the function that updates the state value

const Demo = () => { const [count,setCount] = React.useState(0) const add = () =>{ //setCount(count+1) setCount(count => Return (< div> <h2> and :{count}</h2> <button onClick={add}> </div>)} reactdom.render (<Demo) />,document.querySelector('#root'))Copy the code

Effect Hook

Used to simulate the life cycle in a class component

const Demo = () => { const [count,setCount] = React.useState(0) React.useEffect(()=>{ let timer= setInterval(()=>{ SetCount (count=>count+1)},1000) return clearInterval(timer).componentWillunmount Triggered when reinitializing and updating, = (componentDidMount and componentDidUpdate) */ const add = () =>{componentDidMount */ const add = () =>{ //setCount(count+1) setCount((count)=>{return count}) //console.log(count)} return (<div> <h2> and :{count}</h2> <button </button> </div>)}Copy the code

Ref Hook

You can store or find tags or other data in a function component, similar to how you use react.creatref ()

const Demo = () => { const myRef = React.useRef() const clickme = ()=>{ console.log(myRef.current.value) } return ( <div> <input type="text" ref={myRef}/> <button onClick={clickme}> </button> </div> />,document.querySelector('#root'))Copy the code

Introduction to the react

About the react

Why learn React

Characteristics of the react