全网react基础知识整理

定义组件两种方法

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

函数式组件实例

//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()触发---初次渲染

constructor()
getDerivedStateFromProps()
render()
componentDidMount() =====> 常用下面是解释为什么常用

更新阶段

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

getDerivedStateFromProps()
shouldComponentUpdate()
render() =====> 必须使用的一个
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载组件

由ReactDOM.unmountComponentAtNode()触发

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>
    )
}

定义组件两种方法

函数式组件实例

类式组件实例

组件实例三大属性

state实例

props实例

refs实例

生命周期分为三个阶段

初始化阶段

更新阶段

卸载组件

生命周期常用实例

componentDidMount

componentWillUnmount实例

鼠标事件

键盘事件

input 事件

input 获取输入内容

refs回调函数形式

键盘形式 event形式

checkbox形式用onChange方法

常见问题FAQ

掘金(sosojie) SVIP

发表评论

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

升级SVIP会员

工作时间

定义组件两种方法

函数式组件实例

类式组件实例

组件实例三大属性

state实例

props实例

refs实例

生命周期分为三个阶段

初始化阶段

更新阶段

卸载组件

生命周期常用实例

componentDidMount

componentWillUnmount实例

鼠标事件

键盘事件

input 事件

input 获取输入内容

refs回调函数形式

键盘形式 event形式

checkbox形式用onChange方法

常见问题FAQ

掘金(sosojie) SVIP

相关推荐

发表评论

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

升级SVIP会员

工作时间

请选择支付方式