【React】React 入门教程

NAMECZ

墨衍会员 · AI 创作全网分发码龄9年

关注

原创 2022-02-10 16:40:21 678 阅读 AI 写同款· GEO 优化 ›

小白快速上手React 看这篇就够了！！（基础篇）本篇可以快速了解React的基础语法，便于遗忘时快速复习，里面的小案例通俗易懂，没有废话，只有简单、简单、还是简单！阅读详情

一、jsx

1、 Script 类型一定要为 text/babel

<script type="text/babel"></script>

2、解析规则

遇到 <> 开头的代码以标签的语法解析 html同名的转换成html元素其他标签需要特别解析
jsx 页面里边想要解析 js 代码必须要写在 {} 里边

使用 ReactDOM.render 方法将 react 元素渲染在根节点里

<body>
    <div id='root'></div> //必须有根节点
</body>
// react 核心库
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

// 提供操作dom的react扩展库
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

// 解析jsx语法的库
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>

// type类型必须为 'text/babel'
<script type='text/babel'>  
    const str = 'hello world'
    const vDom = <h1>{str}</h1>
     //下边为渲染jsx语法方法（一般来说页面只调用一次）
    ReactDOM.render(vDom,document.getElementById('root'))
</script>

二、React 组件

1、react 有两种组件形式

函数组件

类组件

// 函数组件
function Com1() { //必须为大写字母开头
    return <h1>hello world</h1>
}
ReactDOM.render(<Com1 />,document.getElementById('root1'))

// 类组件 （需要继承react.component）
class Com2 extends React.component { //必须以大写字母开头
    render() {
        return (  // 多行标签写在()里，return后不可直接换行
            <div>
                <h1>hello cz1</h1>
                <h1>hello cz2</h1>
            </div>
        )
    }
}
ReactDOM.render(<Com2 />,document.getElementById('root2'))
//渲染组件 需要用尖括号<>将组件名称包裹起来并含有闭合标签

注意事项

注意组件的命名一定要是大写字母开头
注意如果组件返回多个标签，那么多个标签需要被一个根标签包裹，一个组件有且只有一个根标签
渲染组件在 ReactDOM.render 里需要用尖括号 <> 将组件名称（首字母大写）包裹起来并含有闭合标签
return 后边不能直接换行，否则会以没有渲染内容报错，如内容过多，可写在 () 里

2、类组件和函数组件的区别

类组件

可以访问this对象
有可以更新渲染页面的数据状态-state
可以访问输入的props
可以访问生命周期的方法

函数组件

组件不会被实例化，渲染性能提高
只能访问输入的props，没有state
组件不能访问生命周期的方法
组件不能访问this对象

3、state 用来更新渲染页面的数据状态（类组件才拥有state）

类组件才拥有state，所以只有类组件才能动态更新视图
如果类组件需要定义自己的构造函数，一定要在构造函数的第一行通过super()调用父类，也就是React.Component的构造函数（构造函数可省略）
如果在构造函数中没有调用super()，那么组件实例被构造之后，类实例的所有成员就无法通过this.props访问到父组件传递过来的props值
在方法里要改变state的值需要调用 this.setState()方法

在render中需要覆盖state的值不需要调用setState方法，可直接通过this.state直接赋值，注意，在render中给state赋值，将会覆盖state之前任何时刻的值（如果你需要的话，实际上没人会这么做，了解即可）

class Com extends React.Component {
    constructor(props) { //构造函数  可省略，默认调用
        super(props) //只要是继承的类写构造函数必须要调用super()
        this.state={ //初始化state，在这里合并props
            name:props.name
        }
    }
    
    //相当于调用构造函数里的this.state，初始化state，可省略构造函数
    state={
        name:props.name
    }
    
    fun=()=>{
        this.setState({ // 在方法里要改变state的值需要调用setState()方法
            name:'更新的值'
        })
    }
    render(){
        return <h1>{this.state.name}</h1>
    }
}

4、props 父组件向子组件传值

 // 函数组件props传值
function Com1(props) {
    return <h1>{props.name}</h1>
}

//类组件props传值
class Com2 extends React.Component{
    render(){
        return <h1>{this.props.name}</h1>
    }
}

class App extends React.Component{
    render(){
        return (
            <div>
                <Com1 name='我是函数组件'/>
                <Com2 name='我是类组件' />
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))
//渲染组件 需要用尖括号<>将组件名称包裹起来并含有闭合标签

5、子组件向父组件传值

在父组件中给子组件Com1传递一个名为appSubmit的方法，对应父组件中的submit方法
在子组件Com1中由 comSubmit 方法触发通过props传递过来的appSubmit方法并传递参数

在父组件 submit 方法中拿到子组件Com1传递的参数

class Com1 extends React.Component{
    comSubmit=()=>{
        //调用父组件传递过来的方法并传递参数，对应父组件中的submit方法
        this.props.appSubmit('参数')
    }
    render(){
        return <button onClick={this.comSubmit}>向父组件传递参数</button>
    }
}

class App extends React.Component{
    // 当子组件Com1触发父组件传递的appSubmit方法后，就触发了该方法
    submit=(val)=>{
        console.log(val) // 拿到子组件传递过来的参数
    }
    render(){
        // 将父组件submit方法以appSubmit为名传递到子组件Com1中
        // 实际上子组件Com1中获取的appSubmit方法就是父组件的submit方法
        return <Com1 appSubmit={this.submit} />
    }
}

6、子组件向子组件传值

先让子组件A向父组件传值
再把父组件从子组件A中接收的参数通过props传递给子组件B

三、受控组件和非受控组件（收集表单数据）

1、受state控制的为受控组件

通过state来控制表单元素

随着用户输入进行更新

class Com extends React.Component{
    state={  // 相当于构造函数里的this.state
        name:''
    }
    getInput=(e)=>{
        let val = e.target.value
        this.setState({ // 更新state
            name:val
        })
    }
    render(){
        // 把表单的值和state的值绑定，再通过方法更新用户输入的值
        return <input value={this.state.name} onChange={this.getInput} />
    }
}

2、不受state控制的为非受控组件

利用ref来获取元素dom，通过操作dom拿到数据

class Com extends React.Component{
    getInput=()=>{
        let val = this.refs.userName.value
        console.log(val)
    }
    render(){
        return (
            <div>
                <input ref='userName' />
                <button onClick={this.getInput}>get</button>
            </div>
        )
    }
}

四、生命周期（常用）

1、挂载过程

componentWillMount()
- 组件已经经历过constructor()初始化但是还未渲染dom
- 用的比较少
componentDidMount()
- 组件第一次渲染完成，此时dom节点已经生成
- 这里可以调用ajax请求，setData后组件会重新渲染

2、更新过程

componentWillReceiveProps(nextProps)
- 组件初始化的时候不会调用该生命周期
shouldComponentUpdate(nextProps,nextState)
- nextProps 未更新之前的state的值
- 可以在这一步来决定是否渲染页面
- 必须return一个布尔值，return值的类型不对，或则不return都会报错
- nextState 更新之后state的值