最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 全网react基础知识整理

    正文概述 掘金(sosojie)   2021-03-11   488

    定义组件两种方法

    分别是函数式组件和类式组件,两种方法

    函数式组件实例

    //1.创建函数式组件
    function MyComponent(){
            console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式
            return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    /* 
            执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
            1.React解析组件标签,找到了MyComponent组件。
            2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
    */
    

    类式组件实例

    //1.创建类式组件
    class MyComponent extends React.Component {
        render(){
            //render是放在哪里的?—— MyComponent的原型对象上,供实例使用。
            //render中的this是谁?—— MyComponent的实例对象 <=> MyComponent组件实例对象。
            console.log('render中的this:',this);
            return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    /* 
        执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
        1.React解析组件标签,找到了MyComponent组件。
        2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
        3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
    */
    

    组件实例三大属性

    分别是state表示初始化状态、props、refs

    state实例

    //1.创建组件
    class Weather extends React.Component{
    //初始化状态
    state = {isHot:false,wind:'微风'}
    render(){
        const {isHot,wind} = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
    }
    //自定义方法————要用赋值语句的形式+箭头函数
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
    //2.渲染组件到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'))
    }
    

    props实例

    1props基本使用

    //创建组件
    class Person extends React.Component{
        render(){
            // console.log(this);
            const {name,age,sex} = this.props
            return (
                    <ul>
                            <li>姓名:{name}</li>
                            <li>性别:{sex}</li>
                            <li>年龄:{age+1}</li>
                    </ul>
            )
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test'))
    

    2对props进行限制 通过一个propTypes的插件

    //创建组件
    class Person extends React.Component{
        render(){
            // console.log(this);
            const {name,age,sex} = this.props
            //props是只读的
            //this.props.name = 'jack' //此行代码会报错,因为props是只读的
            return (
                    <ul>
                            <li>姓名:{name}</li>
                            <li>性别:{sex}</li>
                            <li>年龄:{age+1}</li>
                    </ul>
            )
        }
    }
    //对标签属性进行类型、必要性的限制
    Person.propTypes = {
        name:PropTypes.string.isRequired, //限制name必传,且为字符串
        sex:PropTypes.string,//限制sex为字符串
        age:PropTypes.number,//限制age为数值
        speak:PropTypes.func,//限制speak为函数
    }
    //指定默认标签属性值
    Person.defaultProps = {
        sex:'男',//sex默认值为男
        age:18 //age默认值为18
    }
    //渲染组件到页面
    ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test'))
    
    function speak(){
        console.log('我说话了');
    }
    

    3props的简写方式

    //创建组件
    class Person extends React.Component{
        constructor(props){
            //构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props
            // console.log(props);
            super(props)
            console.log('constructor',this.props);
        }
        //对标签属性进行类型、必要性的限制
        static propTypes = {
            name:PropTypes.string.isRequired, //限制name必传,且为字符串
            sex:PropTypes.string,//限制sex为字符串
            age:PropTypes.number,//限制age为数值
        }
        //指定默认标签属性值
        static defaultProps = {
            sex:'男',//sex默认值为男
            age:18 //age默认值为18
        }
        render(){
            // console.log(this);
            const {name,age,sex} = this.props
            //props是只读的
            return (
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{sex}</li>
                    <li>年龄:{age+1}</li>
                </ul>
            )
        }
    }
    
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
    

    4函数组件使用props

    //创建组件
    function Person (props){
        const {name,age,sex} = props
        return (
            <ul>
                <li>姓名:{name}</li>
                <li>性别:{sex}</li>
                <li>年龄:{age}</li>
            </ul>
        )
    }
    Person.propTypes = {
        name:PropTypes.string.isRequired, //限制name必传,且为字符串
        sex:PropTypes.string,//限制sex为字符串
        age:PropTypes.number,//限制age为数值
    }
    
    //指定默认标签属性值
    Person.defaultProps = {
        sex:'男',//sex默认值为男
        age:18 //age默认值为18
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
    

    refs实例

    1字符串形式的ref

    //创建组件
    class Demo extends React.Component{
        //展示左侧输入框的数据
        showData = ()=>{
            const {input1} = this.refs
            alert(input1.value)
        }
        //展示右侧输入框的数据
        showData2 = ()=>{
            const {input2} = this.refs
            alert(input2.value)
        }
        render(){
            return(
                <div>
                    <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                    <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                </div>
            )
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    

    2回调函数形式

    //创建组件
    class Demo extends React.Component{
        //展示左侧输入框的数据
        showData = ()=>{
            const {input1} = this
            alert(input1.value)
        }
        //展示右侧输入框的数据
        showData2 = ()=>{
            const {input2} = this
            alert(input2.value)
        }
        render(){
            return(
                <div>
                    <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
                    <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    <input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
                </div>
            )
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    

    3回调ref中回调执行次数的问题

    //创建组件
    class Demo extends React.Component{
    
        state = {isHot:false}
    
        showInfo = ()=>{
            const {input1} = this
            alert(input1.value)
        }
    
        changeWeather = ()=>{
            //获取原来的状态
            const {isHot} = this.state
            //更新状态
            this.setState({isHot:!isHot})
        }
    
        saveInput = (c)=>{
            this.input1 = c;
            console.log('@',c);
        }
    
        render(){
            const {isHot} = this.state
            return(
                <div>
                        <h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
                        <input ref={this.saveInput} type="text"/><br/><br/>
                        <button onClick={this.showInfo}>点我提示输入的数据</button>
                        <button onClick={this.changeWeather}>点我切换天气</button>
                </div>
            )
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    

    生命周期分为三个阶段

    初始化阶段

    由ReactDOM.render()触发---初次渲染

    1. constructor()
    2. getDerivedStateFromProps()
    3. render()
    4. componentDidMount() =====> 常用 下面是解释为什么常用

    更新阶段

    由组件内部this.setSate()或父组件重新render触发

    1. getDerivedStateFromProps()
    2. shouldComponentUpdate()
    3. render() =====> 必须使用的一个
    4. getSnapshotBeforeUpdate()
    5. componentDidUpdate()

    卸载组件

    由ReactDOM.unmountComponentAtNode()触发

    1. componentWillUnmount() =====> 常用 下面是解释为什么常用

    生命周期常用实例

    componentDidMount

    class Time extends React.Component {
        state = {date: new Date()}
        componentDidMount () {
            setInterval(() => {
                this.setState({
                        date: new Date()
                })
            }, 1000)
        }
        render () {
            return (
                <div>
                    <h1>hello</h1>
                    <input type="text"/>
                    <span>
                            现在是:{this.state.date.toTimeString()}
                            <input type="text"/>
                    </span>
                </div>
            )
        }
    }
    
    ReactDOM.render(<Time/>,document.getElementById('test'))
    

    componentWillUnmount实例

    class Count extends React.Component{
        //组件将要卸载的钩子
        componentWillUnmount(){
           console.log('Count---componentWillUnmount');
        }
        //卸载组件按钮的回调
        death = ()=>{
           ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        render(){
            return(
                <div>
                    <button onClick={this.death}>卸载组件</button>
                </div>
            )
        }
    }
    

    鼠标事件

    分别是onClick点击事件、onMouseEnter移入事件、onMouseLeave移出事件

    render() {
        return (
            <li style={{backgroundColor: mouse?'#ddd': 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} >
                    <label>
                            <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
                            <span>{name}</span>
                    </label>
                    <button onClick={()=>this.handleDelete(id)} className="btn btn-danger" style={{display:mouse?'block': 'none'}}>删除</button>
            </li>
        )
    }
    

    键盘事件

    分别是onKeyUp

    render() {
        return (
            <div className="todo-header">
                    <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称,按回车键确认"/>
            </div>
        )
    }
    

    input 事件

    分别是onChange事件

        <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称,按回车键确认"/>
        <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
    

    input 获取输入内容

    refs回调函数形式

    export default class Search extends Component {
      search = () =>{
       // 获取用户的输入
        // console.log(this.keyWordElement.value)
        // 常规赋值
        // const {value} = this.keyWordElement
        // 解构赋值连续
        const {keyWordElement: {value:keyWord}} = this
    
        render() {
            return (
                    <section className="jumbotron">
                            <input ref={c=>this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
                    </section>
            )
        }
    }
    

    键盘形式 event形式

    handleKeyUp = (event)=>{
        // 解构赋值获取keyCode,target
        const {keyCode,target} = event
        // 判断是否是回车按键
        if(keyCode !==13) return
        console.log(target.value)
        // 添加的todo名字不能空
        if(target.value.trim() === ''){
          alert('名字不能为空')
          return
        }
        const todoObj = {id: nanoid(),name: target.value,done: false}
        // 将todoObj给addTodo
        this.props.addTodo(todoObj)
        // 清空输入
        target.value = ''
    }
    <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称,按回车键确认"/>
    

    checkbox形式用onChange方法

    // 勾选,取消勾选某一个todo的回调 用的是高阶函数
      handleCheck = (id) => {
        return (event) => {
          this.props.updateTodo(id,event.target.checked)
        }
      }
    render() {
    const {done} = this.props
        return (
            <li>
                <label>
                   <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
    
                </label>
    
            </li>
        )
    }
    

    起源地下载网 » 全网react基础知识整理

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元