frontend-interview React为什么是典型FP，ReactView = render(data)怎样FP方式理解？

Feb 25 '22 01:02 su37josephxia

ReactDOM.render(
  React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
  ),
  document.getElementById('root')
);

通过 React.createElement 创造元素，通过 ReactDOM.render 进行渲染挂载。有固定的输入输出，只要给的参数一定，输出是一定的。

Mar 02 '22 13:03 zcma11

FP:函数式编程(Functional Programming)
React 遵循 $ UI = f(state) $ 即同样是数据渲染出同样的页面
所以 React 属于典型FP

Mar 02 '22 14:03 chunhuigao

函数式编程特性，有固定的输入输出，只要给的参数一定，输出是一定的，函数执行只以来传入的参数，且不改变外部变量

<!DOCTYPE html>
<html>
<style>
    @charset "UTF-8";
</style>

<head>
    <title>实现一个react render</title>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    // 模拟react实现把一个数据模型，动态渲染到dom上
    class Element {
        constructor(type, props) {
            this.type = type;
            this.propos = props;
        }
    }
    const react = {
        creatElement: (type, props = {}, ...children) => {
            return new Element(type, {
                ...props,
                children
            })

        }
    }
    const ReactDOM = {
        creatComponent: (creatComponent, container) => {
           const component= creatComponent();
            container.innerHTML=`<${component.type}>${component.propos.children[0]}</${component.type}>`;

        }
    }
    //懒函数，只定义不执行，在需要的时候执行
    const Title = () => react.creatElement('h1', {}, 'hello word');
    //执行creatComponent，创建元素并渲染到dom上
    ReactDOM.creatComponent(Title, document.getElementById('root'));
</script>
</html>