关于前端面试你需要知道的知识点

function ParentComponent(props){    return (        <div>            {props.children}        </div>    )}

//子组件function RadioOption(props) {  return (    <label>      <input type="radio" value={props.value} name={props.name} />      {props.label}    </label>  )}

//父组件用,props是指父组件的propsfunction renderChildren(props) {
  //遍历所有子组件  return React.Children.map(props.children, child => {    if (child.type === RadioOption)      return React.cloneElement(child, {        //把父组件的props.name赋值给每个子组件        name: props.name      })    else      return child  })}//父组件function RadioGroup(props) {  return (    <div>      {renderChildren(props)}    </div>  )}function App() {  return (    <RadioGroup name="hello">      <RadioOption label="选项一" value="1" />      <RadioOption label="选项二" value="2" />      <RadioOption label="选项三" value="3" />    </RadioGroup>  )}export default App;

<Route path="/home" component={App} onEnter={(nexState,replace)=>{      if(nexState.location.pathname!=='/'){         var  sid = UtilsMoudle.getSidFromUrl(nexState);         if(!sid){            replace("/")         }else{            console.log(sid);         }      }    }}>

// 需要在入口处添加自定义权限指令v-auth，显示可操作组件Vue.directive('auth', {    bind: function (el, binding, vnode) {        // 用户权限表        const rules = auths        for (let i = 0; i < rules.length; i++) {            const item = rules[i]            if(!binding.value || (binding.value == item.auth)){                // 权限允许则显示组件                return true            }        }        // 移除组件        el.parentNode.removeChild(el)    }})// 使用<template>  <div>    <Button v-auth="admin_user_add">添加用户</Button>    <Button v-auth="admin_user_del">删除用户</Button>    <Button v-auth="admin_user_edit">编辑用户</Button>  </div></template>

答案是：在 constructor 函数里面，需要用到props的值的时候，就需要调用 super(props)

变化前数组的值是[1,2,3,4]，key就是对应的下标：0，1，2，3变化后数组的值是[4,3,2,1]，key对应的下标也是：0，1，2，3

变化前数组的值是[1,2,3,4]，key就是对应的下标：id0，id1，id2，id3变化后数组的值是[4,3,2,1]，key对应的下标也是：id3，id2，id1，id0

import React from 'react';function ExampleApplication() {  return (    <div>      <Header />      <React.StrictMode>                <div>          <ComponentOne />          <ComponentTwo />        </div>      </React.StrictMode>            <Footer />    </div>  );}

const actionTypes = {    ADD: 'ADD',    CHANGEINFO: 'CHANGEINFO',}
const initState = {    info: '初始化',}
export default function initReducer(state=initState, action) {    switch(action.type) {        case actionTypes.CHANGEINFO:            return {                ...state,                info: action.preload.info || '',            }        default:            return { ...state };    }}
export default function createStore(reducer, initialState, middleFunc) {
    if (initialState && typeof initialState === 'function') {        middleFunc = initialState;        initialState = undefined;    }
    let currentState = initialState;
    const listeners = [];
    if (middleFunc && typeof middleFunc === 'function') {        // 封装dispatch         return middleFunc(createStore)(reducer, initialState);    }
    const getState = () => {        return currentState;    }
    const dispatch = (action) => {        currentState = reducer(currentState, action);
        listeners.forEach(listener => {            listener();        })    }
    const subscribe = (listener) => {        listeners.push(listener);    }
    return {        getState,        dispatch,        subscribe    }}

const [num, UpdateNum] = useState(0)

function ScrollView({row}) {  let [isScrollingDown, setIsScrollingDown] = useState(false);  let [prevRow, setPrevRow] = useState(null);  if (row !== prevRow) {    // Row 自上次渲染以来发生过改变。更新 isScrollingDown。    setIsScrollingDown(prevRow !== null && row > prevRow);    setPrevRow(row);  }  return `Scrolling down: ${isScrollingDown}`;}

const Button = React.memo((props) => {  // 具体的组件});

// componentDidMountuseEffect(()=>{  // 需要在 componentDidMount 执行的内容}, [])useEffect(() => {   // 在 componentDidMount，以及 count 更改时 componentDidUpdate 执行的内容  document.title = `You clicked ${count} times`;   return () => {    // 需要在 count 更改时 componentDidUpdate（先于 document.title = ... 执行，遵守先清理后更新）    // 以及 componentWillUnmount 执行的内容         } // 当函数中 Cleanup 函数会按照在代码中定义的顺序先后执行，与函数本身的特性无关}, [count]); // 仅在 count 更改时更新

// componentDidMount/componentWillUnmountuseEffect(()=>{  // 需要在 componentDidMount 执行的内容  return function cleanup() {    // 需要在 componentWillUnmount 执行的内容        }}, [])

setState(object nextState[, function callback])

replaceState(object nextState[, function callback])

static getDerivedStateFromProps(nextProps, prevState) {    const {type} = nextProps;    // 当传入的type发生变化的时候，更新state    if (type !== prevState.type) {        return {            type,        };    }    // 否则，对于state不进行任何操作    return null;}

function proxyHoc(WrappedComponent) {    return class extends React.Component {        render() {            const newProps = {                count: 1            }            return <WrappedComponent {...this.props} {...newProps} />        }    }}

const MyContainer = (WrappedComponent)=>{    return class extends WrappedComponent {        render(){            return super.render();        }    }}

import {    fork,    take} from "redux-saga/effects"
const takeEvery = (pattern, saga, ...args) => fork(function*() {    while (true) {        const action = yield take(pattern)        yield fork(saga, ...args.concat(action))    }})

import {    cancel,    fork,    take} from "redux-saga/effects"
const takeLatest = (pattern, saga, ...args) => fork(function*() {    let lastTask    while (true) {        const action = yield take(pattern)        if (lastTask) {            yield cancel(lastTask) // 如果任务已经结束，则 cancel 为空操作        }        lastTask = yield fork(saga, ...args.concat(action))    }})

父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)
把数据传递给子组件<Child data={data} />
子组件接收export default function (props) {    const { data } = props    console.log(data)}子传父子传父可以通过事件方法传值，和父传子有点类似。在父组件中用useState声明数据 const [ data, setData ] = useState(false)
把更新数据的函数传递给子组件<Child setData={setData} />
子组件中触发函数更新数据，就会直接传递给父组件export default function (props) {    const { setData } = props    setData(true)}如果存在多个层级的数据传递，也可依照此方法依次传递
// 多层级用useContextconst User = () => { // 直接获取，不用回调 const { user, setUser } = useContext(UserContext); return <Avatar user={user} setUser={setUser} />;};

import React from 'react';
class App extends React.Component {  render() {    let arr = ['a', 'b', 'c', 'd'];    return (      <ul>        {          arr.map((item, index) => {            return <li key={index}>{item}</li>          })        }      </ul>    )  }}
class App extends React.Component {  render() {    let arr = ['a', 'b', 'c', 'd'];    return (      <ul>        {          arr.forEach((item, index) => {            return <li key={index}>{item}</li>          })        }      </ul>    )  }}

class App extends React.Component {  render() {    let obj = {      a: 1,      b: 2,      c: 3    }    return (      <ul>        {          (() => {            let domArr = [];            for(const key in obj) {              if(obj.hasOwnProperty(key)) {                const value = obj[key]                domArr.push(<li key={key}>{value}</li>)              }            }            return domArr;          })()        }      </ul>    )  }}
// Object.entries() 把对象转换成数组class App extends React.Component {  render() {    let obj = {      a: 1,      b: 2,      c: 3    }    return (      <ul>        {          Object.entries(obj).map(([key, value], index) => {   // item是一个数组，把item解构，写法是[key, value]            return <li key={key}>{value}</li>          })         }      </ul>    )  }}